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();

然后，在滚动时，re-set scroll_timer 变量中的 time-stamp：

$(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-monitoring 函数只需要从当前时间减去 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

jQuery 不在浏览器中滚动时的事件侦听器？

jQuery event listener when NOT scrolling in the browser?

javascript

jquery

jquery-events