js监听鼠标滚轮

在JavaScript中，监听鼠标滚轮事件通常使用wheel事件，对于旧版本的浏览器，可能还需要考虑mousewheel和DOMMouseScroll事件。以下是关于鼠标滚轮事件的一些基础概念：

基础概念

1. wheel事件

标准事件，现代浏览器都支持。
提供了滚轮的详细信息，如滚动的方向和距离。

2. mousewheel事件

非标准事件，主要被旧版Chrome和Safari支持。
提供了滚动方向的信息，但信息不如wheel事件详细。

3. DOMMouseScroll事件

非标准事件，主要被旧版Firefox支持。
同样提供了滚动方向的信息。

监听鼠标滚轮事件的示例代码

// 使用 addEventListener 监听 wheel 事件
window.addEventListener('wheel', function(event) {
    // event.deltaY 表示垂直滚动的距离，正值表示向下滚动，负值表示向上滚动
    if (event.deltaY > 0) {
        console.log('向下滚动');
    } else {
        console.log('向上滚动');
    }
}, { passive: true }); // 使用 passive: true 可以提高滚动性能

// 兼容旧版浏览器的事件监听
function handleMouseWheel(event) {
    event = event || window.event;
    var delta = event.wheelDelta || -event.deltaY || -event.detail;
    if (delta < 0) {
        console.log('向下滚动');
    } else {
        console.log('向上滚动');
    }
}

if (window.addEventListener) {
    window.addEventListener('mousewheel', handleMouseWheel, false); // IE/Opera/Chrome
    window.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Firefox
} else {
    window.attachEvent('onmousewheel', handleMouseWheel); // IE 6/7/8
}

优势

实时响应：可以实时捕捉用户的滚动行为，为用户提供即时的反馈。
交互增强：通过监听滚轮事件，可以实现更多交互效果，如无限滚动、页面元素的动态加载等。

应用场景

无限滚动页面：当用户滚动到页面底部时，自动加载更多内容。
图片或地图的缩放：根据滚轮的滚动方向来放大或缩小图片或地图。
页面元素的动态显示与隐藏：例如，当用户向下滚动时，显示返回顶部按钮。

可能遇到的问题及解决方法

问题1：事件触发频繁，导致性能问题

解决方法：可以使用节流（throttle）或防抖（debounce）技术来限制事件处理函数的执行频率。

function throttle(func, wait) {
    let timeout = null;
    return function() {
        if (!timeout) {
            timeout = setTimeout(() => {
                func.apply(this, arguments);
                timeout = null;
            }, wait);
        }
    };
}

window.addEventListener('wheel', throttle(function(event) {
    // 处理滚动事件
}, 100));

问题2：不同浏览器对滚轮事件的属性支持不同