JS滾輪事件詳解

一、滾輪事件簡介

JS滾輪事件是指當用戶滾動鼠標滑輪時，觸發的一類事件。這個事件可以在Web應用程序中應用，實現一些非常有用的功能，比如放大或縮小圖像，滾動頁面等。

JS滾輪事件在不同的瀏覽器中有不同的名稱，比如Firefox和Chrome使用的是”wheel”事件，IE和Edge使用的是”mousewheel”事件。為了實現統一，基本上我們會同時使用兩個事件。

// Firefox和Chrome使用的事件
window.addEventListener("wheel", function(event){
    console.log(event.deltaY);
});

// IE和Edge使用的事件
window.addEventListener("mousewheel", function(event){
    console.log(event.deltaY);
});

上述代碼演示了如何監聽滾輪事件，並打印出其中垂直方向的滾動距離。deltaY的值為正表示向上滾動，為負表示向下滾動。

二、滾輪事件的兼容性處理

由於不同的瀏覽器有不同的滾輪事件名稱和相應的屬性，所以要對兼容性進行處理，保證代碼在不同的瀏覽器中都能夠正常工作。

function addWheelListener(elem, callback) {
  if (elem.addEventListener) {
    if ('onwheel' in document) {
      // IE9+, FF17+, Ch31+
      elem.addEventListener("wheel", callback);
    } else if ('onmousewheel' in document) {
      // legacy events for older browsers
      elem.addEventListener("mousewheel", callback);
    } else {
      // Firefox 16-
      elem.addEventListener("MozMousePixelScroll", callback);
    }
  } else { // IE8-
    elem.attachEvent("onmousewheel", callback);
  }
}

// 使用方法：
addWheelListener(window, function(event){
    console.log(event.deltaY);
});

上述代碼演示了如何使用一個公用的滾輪事件監聽方法addWheelListener，以在不同瀏覽器中通用。該函數由Scott O’Hara在GitHub上公開。主要思路是檢查瀏覽器是否支持”wheel”事件和”mousewheel”事件，如果都不支持，則使用”MozMousePixelScroll”事件（在Firefox早期版本中使用）。

三、禁止默認滾動行為

JS滾輪事件默認會觸發瀏覽器的滾動，也就是說，當用戶使用鼠標滾輪時，頁面也會滾動。然而，在某些情況下，我們可能需要禁止默認滾動行為，比如在自定義滾動條時，需要通過JS來實現滾動，並禁止瀏覽器的默認行為。

// 阻止瀏覽器窗口默認滾動
window.addEventListener("wheel", function(event){
    event.preventDefault(); // 阻止默認滾動
});

// 阻止某個元素的默認滾動
var elem = document.getElementById("my-elem");
elem.addEventListener("wheel", function(event){
    event.preventDefault();
});

上述代碼演示了如何使用preventDefault()方法來禁止默認滾動行為。如果希望禁止某個元素的滾動行為，可以將其滾動事件監聽器綁定到該元素上，並調用preventDefault()方法來阻止其默認滾動行為。

四、滾動方向的控制

滾輪事件的deltaY值表示垂直方向的滾動距離，而deltaX則代表水平方向的滾動距離。有時我們需要限制滾動的方向，比如只能垂直滾動或水平滾動。這時，可以使用scrollLeft和scrollTop屬性來控制滾動的方向。

// 禁止水平滾動，只允許垂直滾動
var elem = document.getElementById("my-elem");
elem.addEventListener("wheel", function(event){
    event.preventDefault();

    var delta = event.deltaY || event.detail || event.wheelDelta;

    if(delta < 0 && this.scrollTop  0 && this.scrollTop >= this.scrollHeight - this.offsetHeight) return;

    this.scrollTop += (delta < 0 ? -30 : 30);
    // 滾動30px高
});

上述代碼演示了如何在一個元素上實現垂直滾動，同時禁止水平滾動。通過監聽該元素的滾輪事件，在觸發時計算出滾動方向，並根據滾動的位置來限制滾動的距離。這裡使用了scrollTop和scrollHeight屬性來計算元素是否滾動到頂部或底部。

五、滾動事件的節流

在處理大量滾輪事件時，如果沒有做節流處理，可能會導致性能問題。為了避免這種情況發生，可以使用節流函數來限制滾輪事件的觸發頻率。

// 節流函數
function throttle(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

// 應用到滾輪事件
var elem = document.getElementById("my-elem");
var throttleScroll = throttle(function(event){
    console.log(event.deltaY);
}, 100);

elem.addEventListener("wheel", throttleScroll); // 每100毫秒觸發一次

上述代碼演示了如何使用節流函數（throttle）來限制滾輪事件的觸發頻率。在設置一個節流的時間間隔後，每次觸發滾輪事件時，將事件的處理函數傳遞給節流函數，節流函數會在特定時間間隔內執行一次事件處理函數。

總結

JS滾輪事件是Web開發中非常重要的一部分。了解JS滾輪事件的基本概念、兼容性處理、禁止默認滾動、滾動方向控制和節流處理，能夠幫助我們更好地應用這個事件，實現各種應用程序的需求。在開發過程中，我們需要根據實際情況，對這些方面進行綜合考慮，並不斷優化其性能和交互體驗。