如何检测滚动条上的鼠标按下？ （或“scrollEnd”事件）

Question

有人知道如何检测滚动条上的 mouseup 事件吗？它在 FF 中有效，但在 Chrome 或 IE9 中无效。

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

总体想法是，我想要检测 scrollEnd 事件。显然没有这样的事情，所以我打算结合使用 mouseUp 和计时器，但是 mouseUp 在大多数浏览器中都不会触发！ div 包含一个项目网格，因此当用户停止滚动时，我想将滚动位置调整到有意义的最近点，例如最近单元格的边缘。但是，如果它们处于滚动中间，我不想自动调整位置。

我也很乐意接受任何给我相当于 scrollEnd 的答案

Answer 1

找到了一种无需计时器即可工作的解决方案，但仅当您滚动整个窗口时才有效。

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 2

使用 jquery 有一个 .scroll 事件可以使用。也许使用全局变量来跟踪 .scrollTop() （它返回屏幕上方的像素数）何时停止变化？仍然会产生竞争条件，但它应该有效。

Answer 3

回答我自己的问题，这样我就可以关闭它——对此没有好的解决方案，所以计时器......

Answer 4

我正在处理同样的问题。对我来说 IE9 不会为滚动条发出 mouseup 事件。所以，我检查了一下，在 IE9 上，当你“mouseup”时，它会发出 mousemove 事件。所以我所做的就是监视滚动，并监视鼠标移动。当用户滚动时，发生 mousemove 事件，然后我将其理解为 mouseup 事件。仅对 IE9 执行此检查，检查 proto 属性可用性。该代码也适用于 Opera，但 Opera 有 mouseup，当这两个事件发生时对我来说没有问题。这是代码，我编写 AngularJS + ZEPTO 代码，因此了解想法并编写自己的代码，不要指望直接复制并粘贴此代码：

        // 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>