Question

当用户点击页面顶部并仍在顶部滚动时，我需要运行一个函数。但是，如果用户快速滚动到页面顶部以到达当前视图的顶部，则该功能无法触发。仅当用户坚持滚动顶部时，该功能才需要工作。我在鼠标滚轮事件上苦苦挣扎，但它会触发很多次，具体取决于用户滚动的速度。有任何想法吗？我在下面的尝试。

var scrolledTwice = false;

$('.js-films-listing').on('mousewheel', function (e) {
    if ($(window).scrollTop() === 0) {
        scrolledTwice = true;
        if (e.deltaY > 0) {
            // upscroll code
            // do something if scrolledTwice
        } else {
            // downscroll code
        }
    }
});

Answer 1

注意：如果您已经位于顶部并继续向上滚动，请稍等一下，然后再次向上滚动，它将触发。让我知道您是否希望在触发滚动计数之前先向下滚动。也就是说，如果您位于顶部，请向上滚动，稍等片刻，然后再次向上滚动，它将记录两次滚动。在注册任何其他向上滚动之前，您可能考虑添加向下滚动。

请注意超时。超时用于消除所有事件触发的反弹。上一次滚动事件触发后，它将仅增加100ms的滚动计数。还请记住，具有“弹性”样式滚动的特定设备将在滚动最初发生后很长时间继续触发。这就是为什么我要增加100毫秒的时间延迟。如果上一个滚动后不到100毫秒触发滚动，则会取消超时并重新启动。

当滚动顶部为0时，向上滚动被注册。它被注册为计数标志，计数到2时将复位。滚动顶部两次达到两次后，会出现一个警告框。

var scrollCount = 0;
var timeout;

$('.js-films-listing').on('mousewheel', function(e) {
  clearTimeout(timeout);
  timeout = window.setTimeout(function() {
    if ($(window).scrollTop() == 0) {
      scrollCount++;
      console.log(scrollCount);
    }
  }, 100);
  if(scrollCount == 2){
    alert('scrolled to top twice...restarting counter...');
    scrollCount = 0;
  }
});

.js-films-listing {
  height: 100vh;
  width: 100vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-films-listing">
  <h1>testing</h1>
  <div>

第二次到达页面顶部后触发功能

1 个答案: