Question

任何人都知道如何在滚动条上检测mouseup事件？它适用于FF，但不适用于Chrome或IE9。

总的想法是我想要检测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有鼠标，然后当两个事件发生时我都没问题。这是代码，我写了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

已经很晚了......但是你的页面的任何部分都有任何滚动的解决方案....我用下一个代码来做...

＆＃13;

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

＆＃13;

body{
  height:5000px;
}

＆＃13;

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

＆＃13;

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

5 个答案:

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

5 个答案:

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