Слушатель событий jQuery, когда НЕ прокручивается в браузере?

Question

Мне нужно таргетировать, когда браузер не прокручивается:

Пока у меня есть этот код:

var position = jQuery(window).scrollTop(); // how much is scolling
// should start at 0    
jQuery(window).scroll(function() {
    var scroll = jQuery(window).scrollTop();

    if(scroll > position) { // scrolling down
        // do something when scrolling down
    } else if(scroll < position) { // scrolling up
        // do something when scrolling up
    }else { // idle???
        // do something when idle
    }
    position = scroll;    
});

Прокрутка вверх и вниз работает отлично, но я не могуцель, когда прокрутки нет вообще.Как мне это сделать?

Answer 1

Используйте переменную для отслеживания состояния прокрутки и таймер, чтобы определить, была ли прокрутка остановлена ​​на N секунд.

var scroll_active = false;
var scroll_timer = new Date();

Запустите таймер прокрутки:

check_scroll_time();

Затем при прокрутке заново установите отметку времени в переменной scroll_timer:

$(window).scroll(function(){
    scroll_timer = new Date();

    //Your existing code goes here; No-scroll events are handled in check_scroll_time()
    var scroll = jQuery(window).scrollTop();
    if(scroll > position) { // scrolling down
       // do something when scrolling down
    } else if(scroll < position) { // scrolling up
       // do something when scrolling up
    }

});

Ваша функция мониторинга прокрутки просто должна вычесть время scroll_timer из текущего времени и определить, сколько времени прошло с момента последнего события прокрутки:

function check_scroll_time(){
  now = new Date();
  if ((now.getTime() - scroll_timer.getTime())/1000 > 2){
    //No scrolling - do something
  }else{
    //Scrolling is active - do nothing
  }
  setTimeout(function(){ check_scroll_time() },300); //<==== call ad-infinitum
}

Пример:

var scroll_active = false;
var scroll_timer = new Date();
check_scroll_time();

$(window).scroll(function(){
  scroll_timer = new Date();
});

function check_scroll_time(){
  now = new Date();
  if ((now.getTime() - scroll_timer.getTime())/1000 > 2){
    $('#msg').html('Paused');
  }else{
    $('#msg').html('Scrolling');
  }
  setTimeout(function(){ check_scroll_time() },300);
}

body{height:700vh;}
#blurb{position:fixed;top:50px;width:100vw;text-align:center;}
#msg{position:fixed;top:0;right:0;text-align:center;padding:5px;background:wheat;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="msg"></div>
<div id="blurb">Scroll away - watching for a 2-sec pause</div>

---

Ссылки:

Javascript Date Reference