如何檢測滾動何時開始使用 Javascript/Jquery？

Question

我想制作一個單頁瀏覽器網站，而不使用任何第三方庫，如 FullPage.js。

• 當滾動開始時 --> 而不是等待自然滾動結束，我希望它不起作用（因此沒有由鼠標引起的可見滾動）並改為運行我的代碼。 （所以它總是可以轉到下一部分或上一部分，而不依賴於用戶滾動的數量）

你知道我怎么能做到這一點嗎？ 我的代碼片段等待滾動結束，然后跳轉到它應該的位置，所以它沒有按預期工作。

（第一部分有一個“當前”類，然后代碼片段通過添加/刪除這個類來操作 100vh 部分）

您可以在下方或此處查看我正在使用的代碼片段： https : //codepen.io/makiwara/pen/PoqjdNZ

非常感謝您的幫助，祝您有美好的一天！

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);
var timerId;
var scrollableElement = document.body; //document.getElementById('scrollableElement');

scrollableElement.addEventListener('wheel', checkScrollDirection);

function checkScrollDirection(event) {
    var $current = $('.current');
  if (checkScrollDirectionIsUp(event)) {
    console.log('UP');
$prev = $current.prev();

            if ($prev.length) {

                clearTimeout(timerId);
                timerId = setTimeout(function(){
                    $current.removeClass('current');
                    $prev.addClass('current');    
                    $('body,html').animate({
                        scrollTop: $('.current').offset().top
                    }, 100);         
                }, 100) 
            }




  } else {
    console.log('Down');
$next = $current.next();

            if ($next.length) {
                clearTimeout(timerId);
                timerId = setTimeout(function(){
                    $current.removeClass('current');
                    $next.addClass('current');
                    $('body,html').animate({
                        scrollTop: $('.current').offset().top
                    }, 100);         
               } , 100) 
            }

  }
}

function checkScrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}

Answer 1

您需要的是限制事件偵聽器，即限制每個時間段只能調用一次函數。

您的代碼所做的基本上是去抖動，即僅在等待時間過后才限制函數調用。

首先放棄你正在使用的計時器。 您需要以某種方式阻止滾動發生不止一次。 如果您使用Underscore.js 的油門功能，JavaScript 部分會很簡單，但有一個警告：它會在時間段過去后通過后續事件。 幸運的是，它的 debouncing 方法接受第三個參數，該參數提供您想要的行為：

scrollableElement.addEventListener(
  "wheel",
  _.debounce(checkScrollDirection, 200, true) // immediately call the function _once_
);

這第三個參數使 debounced 函數表現得像一個節流函數，即它只會觸發一次，同時它會立即觸發。

因此假設您的事件處理程序現在沒有原始超時

function checkScrollDirection(event) {
  var $current = $(".current");
  if (checkScrollDirectionIsUp(event)) {
    console.log("UP");
    $prev = $current.prev("section");
    if ($prev.length) {
      $current.removeClass("current");
      $prev.addClass("current");
      $("body,html").animate(
        {
          scrollTop: $prev.offset().top
        },
        100
      );
    }
  } else {
    console.log("Down");
    $next = $current.next("section");
    if ($next.length) {
      $current.removeClass("current");
      $next.addClass("current");
      $("body,html").animate(
        {
          scrollTop: $next.offset().top
        },
        100
      );
    }
  }
}

順便說一句，嘗試養成在.next()和.prev()中指定選擇器的習慣，因為 jQuery 將匹配所有可能的兄弟姐妹，這很可能是您不想要的。 在這種情況下，codepen 會附加額外的<script>元素，jQuery 也會匹配這些元素。

現在，如果您嘗試這樣做，您會注意到窗口仍然響應每個滾動事件。 滾動事件是無法取消的事件之一，因此您需要通過 CSS 禁用它

最簡單的方法就是隱藏body的溢出

body { max-height: 100vh; overflow: hidden; }

就是這樣。 您可能需要調整油門等待時間以符合您的偏好。

您可以在此處找到代碼筆的工作版本： https ://codepen.io/vassiliskrikonis/pen/XWbgxLj