在JavaScript中监听鼠标滚动事件的两种方法及优化技巧

// 监听整个窗口的滚动
window.addEventListener('scroll', function(event) {
    console.log('页面滚动了');
    // 获取滚动距离
    console.log('scrollY:', window.scrollY);   // 垂直滚动距离
    console.log('scrollX:', window.scrollX);   // 水平滚动距离
});

const box = document.querySelector('.scrollable-box');
box.addEventListener('scroll', function() {
    console.log('元素滚动了', box.scrollTop);
});

// 节流函数示例（使用 lodash 或自己实现）
function throttle(fn, delay) {
    let timer = null;
    return function(...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            }, delay);
        }
    };
}

window.addEventListener('scroll', throttle(() => {
    console.log('节流后的滚动处理');
}, 100));

window.addEventListener('wheel', function(event) {
    console.log('滚轮事件', event);
    // 滚轮方向
    console.log('deltaY:', event.deltaY); // 垂直滚动量（正数向下，负数向上）
    console.log('deltaX:', event.deltaX); // 水平滚动量
    console.log('deltaZ:', event.deltaZ);
    
    // 可阻止默认滚动行为（谨慎使用）
    // event.preventDefault();
}, { passive: false }); // 如果需要 preventDefault，必须设置 passive: false

document.addEventListener('mousewheel', function(event) {
    // 类似 wheel，但属性可能不同
});