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

有人知道如何在滚动条上检测鼠标点击事件吗？它适用于FF，但不适用于Chrome或IE9

我设置了一个快速演示：

总的想法是我想检测一个

scrollEnd

事件。显然没有这样的东西，所以我使用了

mouseUp

和计时器的组合，但是

mouseUp

在大多数浏览器中都不会启动！div包含一个项目网格，因此当用户停止滚动时，我希望将滚动位置调整到最近的有意义的点，例如最近单元格的边缘。但是，如果它们在滚动的中间，我不想自动调整位置。

---

我也很乐意接受任何与使用jquery相当的

scrollEnd

的答案。您可以使用.scroll事件。可能使用全局变量来跟踪.scrollTop（）何时停止更改（它返回屏幕上方的像素数）？仍然会创建一个竞争条件，但它应该会起作用。

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

找到了一个没有计时器但只有在滚动整个窗口时才起作用的解决方案

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

开关（事件类型）{
案例“mousedown”：
_btnDown=true；
//这是导致滚动条上的鼠标出现故障的唯一原因
$（文档）.bind（'mousemove'，函数（事件）{
如果（event.pageX<（$（window.width（）-30））{
//鼠标离开滚动条
$（此）.unbind（事件）；
$（this.trigger（'mouseup'）；
}
});
中断：
“鼠标”一案：
//做任何事
_btnDown=false；
打破
}

---

相当脏。。但是很有效。

我也在处理同样的问题。对我来说，IE9不会为滚动条发出mouseup事件。所以，我检查了IE9，当你“mouseup”时，它会发出mousemove事件。所以我做的是监视器滚动和监视器鼠标移动。当用户滚动时，发生mousemove事件，我将其理解为mouseup事件。仅检查IE9，检查协议的可用性。代码也将为Opera运行，但是Opera有鼠标，当两个事件都发生时，我就没有问题了。下面是代码，我写的是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，我不担心旧浏览器

---

致以最诚挚的问候已经很晚了，但是。。。。在页面的任何部分都有滚动的解决方案。。。。我用下一个代码来做

onScroll=function（）{
$（窗口）.unbind（“mouseup”）.one（'mouseup'，函数（e）{
警报（“向上滚动”）
});
}; 
$（窗口）.bind（“滚动”，onScroll）
正文{
高度：5000px；
}
我知道，我已经在使用定时器了，但我一直在寻找一个更可靠的fire解决方案，但不幸的是还没有。是的，你被定时器卡住了，这只是解决了跨浏览器问题。哈哈，好主意/黑客。实际上，您可以将其外推到任何滚动条上，并消除不准确的
30
。您需要：设置容器
溢出：隐藏
。获取innerWidth
w1
。设置溢出：滚动
。获取innerWidth
w2
。滚动条x位于（
container.left+w1
和
container.left+w2
）之间。很明显，高度也一样。使用计时器的解决方案是什么？jquery滚动事件？这不是一个答案，因此不应选择它，即使它是您自己的问题。请帮助其他开发人员并继续使用您正在使用的计时器代码。@IvanDurst--“没有好的解决方案”是一个非常有效的答案，不管您喜欢与否。实现基于超时的解决方案很简单。问题是在许多浏览器中，
mouseUp
根本不会启动。不确定情况是否仍然如此，5年来没有研究过这一点：）