js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

// 为指定元素绑定鼠标滑轮滚动事件
// 注意：这里使用 'wheel' 事件来捕获鼠标滑轮滚动，因为它在现代浏览器中得到了良好的支持

// 假设我们要绑定到整个document上
document.addEventListener('wheel', function(event) {
    // event.deltaY 是鼠标滑轮滚动的距离，向上滚动为正，向下滚动为负
    // 你可以根据这个值来执行不同的操作
    if (event.deltaY < 0) {
        console.log('滚轮向下滚动');
        // 执行向下滚动的相关操作
    } else {
        console.log('滚轮向上滚动');
        // 执行向上滚动的相关操作
    }

    // 阻止默认行为（如果需要的话），例如在某些情况下阻止页面滚动
    // event.preventDefault();

    // 阻止事件冒泡（如果需要的话）
    // event.stopPropagation();
}, {
    // 可以通过设置passive选项为true来优化滚动性能
    // 当设置为true时，表示事件处理函数不会调用preventDefault()来阻止默认行为
    passive: true
});

上面的代码段展示了如何为整个`document`绑定鼠标滑轮滚动（`wheel`）事件，并简单地区分了向上滚动和向下滚动。这种方式在主流浏览器中都是兼容的。通过`event.deltaY`的值可以判断滚动的方向，并据此执行相应的操作。此外，我还添加了关于如何阻止默认行为和事件冒泡的注释，这在实际应用中可能会用到。最后，通过设置`passive`选项为`true`，可以在支持该选项的浏览器中优化滚动性能。