Как обнаружить mouseup на полосе прокрутки? (или событие "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

Очень поздно, но .... есть решение с любым свитком в любой части вашей страницы .... Я делаю это с помощью следующего кода ...

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>

Answer 3

Я занимался той же проблемой. Для меня 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 4

Отвечая на мой собственный вопрос, чтобы я мог его закрыть - хорошего решения для этого нет, поэтому это таймеры ...

Answer 5

Используя jquery, вы можете использовать событие .scroll. Может быть, использовать глобальную переменную для отслеживания того, когда .scrollTop () (возвращает количество пикселей над экраном) перестало меняться? Все еще создает условие гонки, но оно должно работать.