Как я узнаю, когда я перестал прокручивать? - PullRequest
Новая
       3

Как я узнаю, когда я перестал прокручивать?

38 голосов
/ 07 января 2011

Как узнать, когда я прекратил прокручивать, используя Javascript?

Ответы [ 6 ]

59 голосов
/ 07 января 2011

Вы можете добавить обработчик события scroll и запустить тайм-аут. Что-то вроде: 

var timer = null;
$(window).addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
          // do something
    }, 150);
}, false);

Это запустит тайм-аут и будет ждать 150 мс. Если между тем произошло новое событие scroll, таймер прерывается и создается новое. Если нет, функция будет выполнена. Вы, вероятно, должны отрегулировать время.

Также обратите внимание, что IE использует другой способ подключения прослушивателей событий, это должно дать хорошее представление: quirksmode - Расширенные модели регистрации событий

27 голосов
/ 07 января 2011

Нет события «Остановленная прокрутка». Если вы хотите что-то сделать после того, как пользователь закончит прокрутку, вы можете установить таймер в событии «OnScroll». Если вы получили еще одно событие «OnScroll», сбросьте таймер. Когда таймер наконец срабатывает, вы можете предположить, что прокрутка остановлена. Я бы подумал, что 500 миллисекунд будет хорошей продолжительностью для начала.

Вот пример кода, который работает в IE и Chrome: 

<html>
<body onscroll="bodyScroll();">

<script language="javascript">
    var scrollTimer = -1;

    function bodyScroll() {
        document.body.style.backgroundColor = "white";

        if (scrollTimer != -1)
            clearTimeout(scrollTimer);

        scrollTimer = window.setTimeout("scrollFinished()", 500);
    }

    function scrollFinished() {
        document.body.style.backgroundColor = "red";
    }
</script>

<div style="height:2000px;">
Scroll the page down.  The page will turn red when the scrolling has finished.
</div>

</body>
</html>
4 голосов
/ 21 августа 2015 
(function( $ ) {
        $(function() {
            var $output = $( "#output" ),
                scrolling = "<span id='scrolling'>Scrolling</span>",
                stopped = "<span id='stopped'>Stopped</span>";
                $( window ).scroll(function() {
                    $output.html( scrolling );
                    clearTimeout( $.data( this, "scrollCheck" ) );
                    $.data( this, "scrollCheck", setTimeout(function() {
                        $output.html( stopped );
                    }, 250) );

                });
        });
    })( jQuery );

======= >>>> Рабочий пример здесь

2 голосов
/ 22 марта 2015

Я сделал что-то вроде этого: 

var scrollEvents = (function(document, $){

    var d = {
        scrolling: false,
        scrollDirection : 'none',
        scrollTop: 0,
        eventRegister: {
            scroll: [],
            scrollToTop: [],
            scrollToBottom: [],
            scrollStarted: [],
            scrollStopped: [],
            scrollToTopStarted: [],
            scrollToBottomStarted: []
        },
        getScrollTop: function(){ 
            return d.scrollTop;
        },
        setScrollTop: function(y){
            d.scrollTop = y;
        },
        isScrolling: function(){
            return d.scrolling;
        },
        setScrolling: function(bool){
            var oldVal = d.isScrolling();
            d.scrolling = bool;
            if(bool){
                d.executeCallbacks('scroll');
                if(oldVal !== bool){
                    d.executeCallbacks('scrollStarted');
                }
            }else{
                d.executeCallbacks('scrollStopped');
            }
        },
        getScrollDirection : function(){
            return d.scrollDirection;
        },
        setScrollDirection : function(direction){
            var oldDirection = d.getScrollDirection();
            d.scrollDirection = direction;
            if(direction === 'UP'){
                d.executeCallbacks('scrollToTop');
                if(direction !== oldDirection){
                    d.executeCallbacks('scrollToTopStarted');
                }
            }else if(direction === 'DOWN'){
                d.executeCallbacks('scrollToBottom');
                if(direction !== oldDirection){
                    d.executeCallbacks('scrollToBottomStarted');
                }
            }
        },
        init : function(){
            d.setScrollTop($(document).scrollTop());
            var timer = null;
            $(window).scroll(function(){
                d.setScrolling(true);
                var x = d.getScrollTop();
                setTimeout(function(){
                    var y = $(document).scrollTop();
                    d.setScrollTop(y);
                    if(x > y){
                        d.setScrollDirection('UP');
                    }else{
                        d.setScrollDirection('DOWN');
                    }
                }, 100);
                if(timer !== 'undefined' && timer !== null){
                    clearTimeout(timer);
                }
                timer = setTimeout(function(){
                    d.setScrolling(false);
                    d.setScrollDirection('NONE');
                }, 200);
            });
        },
        registerEvents : function(eventName, callback){
            if(typeof eventName !== 'undefined' && typeof callback === 'function' && typeof d.eventRegister[eventName] !== 'undefined'){
                d.eventRegister[eventName].push(callback);
            }
        },
        executeCallbacks: function(eventName){
            var callabacks = d.eventRegister[eventName];
            for(var k in callabacks){
                if(callabacks.hasOwnProperty(k)){
                    callabacks[k](d.getScrollTop());
                }
            }
        }
    };
    return d;

})(document, $);

код доступен здесь: documentScrollEvents

1 голос
/ 09 февраля 2018

Я тоже пытался добавить свойство display: block для социальных иконок, которые ранее были скрыты в событии прокрутки, а затем снова скрыты через 2 секунды. Но

У меня тоже была та же проблема, что и мой код для тайм-аута после того, как автоматически запускалась первая прокрутка, и у меня не было идеи сброса тайм-аута. Поскольку у него не было надлежащей функции сброса. Но после того, как я увидел идею Дэвида по этому вопросу, я смог сбросить время ожидания, даже если кто-то снова прокрутил его, прежде чем фактически завершить предыдущий таймаут.

  1. код проблемы, показанный ниже до решения 

    $(window).scroll(function(){
  setTimeout(function(){
     $('.fixed-class').slideUp('slow');
   },2000);
});

  1. отредактированный и рабочий код с таймером сброса, если следующая прокрутка произойдет раньше, чем за 2 с 

    var timer=null;
$(window).scroll(function(){
   $('.fixed-class').css("display", "block");
   if(timer !== null) {
      clearTimeout(timer);<br>
    }
   timer=setTimeout(function(){
      $('.fixed-class').slideUp('slow');
      },2000);</p>

<p>});</p></li>
</ol>

<h2>

    Мой рабочий код вызовет скрытое разделение класса с именем 'fixed-class', которое будет отображаться в блоке при каждой прокрутке. С начала последней прокрутки таймер отсчитает 2 секунды, а затем снова переключит отображение с блока на скрытый.

1 голос
/ 25 сентября 2015

Незначительное обновление в вашем ответе. Используйте функцию наведения мыши и выхода. 

 $(document).ready(function() {
           function ticker() {
    $('#ticker li:first').slideUp(function() {
        $(this).appendTo($('#ticker')).slideDown();
    });
}

var ticke= setInterval(function(){ 
                            ticker(); 
            }, 3000);
       $('#ticker li').mouseover(function() { 
          clearInterval(ticke);
      }).mouseout(function() { 
          ticke= setInterval(function(){ ticker(); }, 3000);
        });

        });

DEMO

...