如何检测滚动条的鼠标松开事件？（或“滚动结束”事件）

Question

有人知道如何检测滚动条上的mouseup事件吗？在Firefox中可以工作，但在Chrome或IE9中无法工作。

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

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

我也很乐意接受任何给我等效于scrollEnd的答案。

- user578895

---

[tag:javascript-events] 是一个已弃用的标签，"请勿使用此标签"。 - Brian Tompsett - 汤莱恩

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;
}

看起来有点混乱，但是可行。

- Quarkus

---

哈哈，好主意/技巧。你实际上可以将其推广到任何滚动条，并且摆脱不准确的“30”。你需要：设置容器overflow:hidden。获取innerWidth w1。设置overflow:scroll。获取innerWidth w2。滚动条x在（container.left + w1和container.left + w2）之间。显然，对于高度也要做类似的操作。 - user578895

Answer 2

使用jQuery可以使用.scroll事件。也许可以使用全局变量来跟踪.scrollTop()（它返回屏幕上方的像素数）何时停止更改？仍然会创建竞争条件，但应该可以工作。

- Truk

---

我知道，我已经将其设置为定时器运行，但是我正在寻找更可靠的解决方案，但不幸的是，这样的解决方案不存在。 - user578895

是的，你必须使用计时器，这只是为了解决跨浏览器问题。 - Truk

Answer 3

回答自己的问题以便关闭 -- 没有好的解决方案，所以只能使用定时器...

- user578895

---

使用计时器和哪种解决方案？jQuery滚动事件？ - ThdK

这不是一个答案，即使它是你自己的问题，也不应该被选为答案。请帮助其他开发人员，并跟进您正在使用的计时器代码。 - Ivan Durst

@IvanDurst -- “没有好的解决方案”是一个完全有效的答案，不管你喜欢与否。基于超时实现解决方案是微不足道的。 - user578895

Answer 4

虽然已经很晚了，但是......有解决方案可以使页面的任何部分都可以滚动....我用下面的代码实现了这个功能...

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>

- Tufik Chediak

---

问题在于mouseUp在许多浏览器中根本不会触发。不确定这是否仍然是这种情况，因为已经有5年没有关注它了 :) - user578895

Answer 5

我正在处理同样的问题。对于IE9，它不会为滚动条发出mouseup事件。所以，我进行了检查，发现在IE9上，当您“松开”鼠标时，它会发出mousemove事件。因此，我的做法是监视滚动和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();
        });

一直在解决这个问题。我的系统也适用于移动设备，我有一个大的水平滚动条，当用户停止滚动时，需要找到用户正在查看的实际项目并将其居中显示在屏幕上（更新位置）。希望这可以帮助您。这是为了支持IE9+、FF、Chorme和Opera，我不担心旧浏览器。

最好的问候

- Gustavo Gonçalves