javascript - 用户停止滚动时的事件

Question

我想在用户滚动页面时做一些有趣的 jQuery 操作。但是我不知道如何解决这个问题，因为只有 scroll() 方法。

有什么想法吗？

Answer 1

您可以让 scroll() 有一个超时，每次用户滚动时都会被覆盖。这样，当他在一定毫秒数后停止运行时，您的脚本就会运行，但如果他同时滚动，计数器将重新开始，脚本将等到他再次完成滚动。

更新:

因为这个问题又得到了一些行动，我想我还不如用一个添加 scrollEnd 事件的 jQuery 扩展来更新它

// extension:
$.fn.scrollEnd = function(callback, timeout) {          
  $(this).on('scroll', function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

// how to call it (with a 1000ms timeout):
$(window).scrollEnd(function(){
    alert('stopped scrolling');
}, 1000);

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div style="height: 200vh">
  Long div
</div>