如何检测滚动条上的mouseup？ （或“scrollEnd”事件）

Question

任何人都有任何想法如何检测滚动条上的mouseup事件？它适用于FF，但不适用于Chrome或IE9。

我成立了一个快速演示：http://jsfiddle.net/2EE3P/

的总体思路是，我想检测scrollEnd事件。显然没有这样的事情，所以我要结合使用mouseUp和定时器，但mouseUp在大多数浏览器中都没有启动！ div包含一系列项目，所以当用户停止滚动时，我想将滚动位置调整到最有意义的点，例如，最近的细胞的边缘。但是，如果他们处于滚动中，我不想自动调整位置。

我还会愉快地接受，让我的scrollEnd

Answer 1

回答我的问题，所以我可以关闭它 - 没有很好的解决了这一点，所以计时器是...

Answer 2

相当于使用jQuery有可以使用.scroll事件的任何答复。也许使用一个全局变量来跟踪何时.scrollTop（）（它返回屏幕上方的像素数）已停止改变？仍然会造成竞争状态，但它应该起作用。

Answer 3

发现没有定时器工作，但只有当你正在滚动窗口完整的解决方案。

switch(event.type){ 
      case 'mousedown': 
       _btnDown = true; 
       //THIS IS ONLY CAUSE MOUSEUP ON SCROLLBAR IS BUGGY 
       $(document).bind('mousemove',function(event){ 
        if(event.pageX < ($(window).width() - 30)){ 
        //mouse is off scrollbar 
        $(this).unbind(event); 
        $(this).trigger('mouseup'); 
       } 
       }); 
      break: 
      case 'mouseup': 
       //do whatever 
       _btnDown = false; 
      break; 
} 

很脏..但工程。

Answer 4

我正在处理同样的问题。对我来说，IE9不会为滚动条发出mouseup事件。所以，我检查了IE9，当你“mouseup”它发出mousemove事件。所以我做的是监视器滚动，并监视mousemove。当用户滚动并发生鼠标移动事件时，我将其理解为mouseup事件。只有做这个检查IE9，刨原始财产可用性。该代码也将运行于Opera，但Opera有鼠标移动，当两个事件都发生时，对我来说没有任何问题。下面是代码，我写AngularJS +仄代码，这样的想法，并编写自己的代码，不要指望直接复制粘贴&这段代码：

 // Global for scrolling timeout 
     var q; 

     // Action to do when stop scrolling 
     var updatePosition = function() { 
      // Put the code for stop scrolling action here 
     } 

     $(document).on('mousemove', function(e) { 

      console.log('MOUSE MOVE ' + e.pageX + ',' + e.pageY); 

      if(!('__proto__' in {})) { 
       // for IE only, because it dont have mouseup 
       if($scope.scrolling && $scope.mouse_down) { 

        console.log('FAKE MOUSE UP FOR IE'); 

        // Only simulate the mouseup if mouse is down and scrolling 
        $scope.scrolling = false; 
        $scope.mouse_down = false; 
        // Update Position is the action i do when mouseup, stop scrolling 
        updatePostition(); 
       } 
      } 
     }); 


     $(window).on('scroll', function(){ 

      console.log('SCROLLING'); 

      // Set the scrolling flag to true 
      if(!$scope.scrolling) { 
       $scope.scrolling = true; 
      } 

      // Stop if for some reason you disabled the scrolling monitor 
      if(!$scope.monitor_scrolling) return; 

      // Monitor scroll with a timeout 
      // Update Position is the action i do when stop scrolling 
      var speed = 200; 
      $timeout.cancel(q);  
      q = $timeout(updatePostition, speed); 

     }); 


     $(window).on('mousedown', function() { 
      console.log('MOUSE DOWN'); 
      // Stop monitor scrolling 
      $scope.monitor_scroll = false; 
      // Set that user is mouse down 
      $scope.mouse_down = true; 
     }); 

     $(window).on('mouseup', function() { 
      console.log('MOUSE UP'); 
      // Enable scrolling monitor 
      $scope.monitor_scroll = true; 
      // Change mouse state 
      $scope.mouse_down = false; 
      // Action when stop scrolling 
      updatePostition(); 
     }); 

与这个问题战斗。我的系统也运行移动和我有一个大的水平滚动，总是当用户停止滚动，它需要找到实际的项目，使用正在查看并集中在屏幕上的这个项目（updatePosition）。希望这可以帮到你。这是为了支持IE9 +，FF，Chorme和Opera，我不担心旧版浏览器。

问候

Answer 5

很晚，但....有在你的页面的任何部分滚动的解决方案....我做下一个代码...

onScroll = function(){ 
 
    $(window).unbind("mouseup").one('mouseup',function(e) { 
 
    alert("scroll up") 
 
    }); 
 
}; 
 
$(window).bind("scroll", onScroll);

body{ 
 
    height:5000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>