JS滚轮事件详解

发布时间：2023-05-20

一、滚轮事件简介

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) return;
    if(delta > 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滚轮事件的基本概念、兼容性处理、禁止默认滚动、滚动方向控制和节流处理，能够帮助我们更好地应用这个事件，实现各种应用程序的需求。在开发过程中，我们需要根据实际情况，对这些方面进行综合考虑，并不断优化其性能和交互体验。

推荐文章