js 怎样处理鼠标滚轮事件-js教程-PHP中文网

最推荐的方式是监听wheel事件。它提供deltaY、deltaX和deltaMode属性，能精确获取滚动方向与幅度，通过preventDefault()阻止默认行为并结合{passive: false}实现自定义滚动，现代浏览器支持良好，优于旧的mousewheel和DOMMouseScroll事件。

js 怎样处理鼠标滚轮事件

在JavaScript里处理鼠标滚轮事件，最直接也最推荐的方式是监听DOM元素的

wheel

登录后复制

事件。这个事件能让你捕捉到用户滚轮的每一次转动，无论是向上、向下，还是在某些设备上左右滚动，并且提供详细的滚动方向和幅度信息。

解决方案

要处理鼠标滚轮事件，你通常会给目标元素（可以是

window

登录后复制

、

document

登录后复制

，或者某个具体的HTML元素）添加一个

wheel

登录后复制

事件监听器。这个事件的回调函数会接收到一个

WheelEvent

登录后复制

对象，其中包含了几个关键属性：

deltaY
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
: 表示垂直方向的滚动量。正值通常表示向下滚动（或远离用户），负值表示向上滚动（或朝向用户）。
```
deltaX
```
登录后复制
登录后复制
登录后复制
: 表示水平方向的滚动量。正值通常表示向右滚动，负值表示向左滚动。
```
deltaMode
```
登录后复制
登录后复制
: 表示
```
deltaX
```
登录后复制
登录后复制
登录后复制
、
deltaY
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
、
```
deltaZ
```
登录后复制
值的单位。它有三个可能的值：
- ```
DOM_DELTA_PIXEL
```
  登录后复制
  登录后复制
  (0): 值以像素为单位。这是最常见的，也最直观。
- ```
DOM_DELTA_LINE
```
  登录后复制
  (1): 值以行为单位（通常是文本行）。
- ```
DOM_DELTA_PAGE
```
  登录后复制
  (2): 值以页为单位。

多数情况下，我们主要关注

deltaY

登录后复制

和

deltaX

登录后复制

，而

deltaMode

登录后复制

通常是

DOM_DELTA_PIXEL

登录后复制

。

一个基本的处理流程是这样的：

const targetElement = document.getElementById('myScrollableDiv') || window;

targetElement.addEventListener('wheel', function(event) {
    // 阻止默认的滚动行为，比如浏览器本身的页面滚动
    // 如果不阻止，你的自定义滚动会和浏览器原生滚动同时发生
    event.preventDefault();

    const scrollAmount = event.deltaY; // 获取垂直滚动量

    console.log('滚轮滚动了:', scrollAmount, '像素');

    if (scrollAmount > 0) {
        console.log('向下滚动');
        // 可以在这里实现向下滚动的自定义逻辑
        // 例如：targetElement.scrollTop += 50;
    } else {
        console.log('向上滚动');
        // 可以在这里实现向上滚动的自定义逻辑
        // 例如：targetElement.scrollTop -= 50;
    }

    // 对于水平滚动，可以检查 event.deltaX
    if (event.deltaX !== 0) {
        console.log('水平滚动了:', event.deltaX, '像素');
        // 实现水平滚动的自定义逻辑
    }
}, { passive: false }); // { passive: false } 允许你在事件处理函数中调用 preventDefault()

登录后复制

这里值得一提的是

passive

登录后复制

选项。当设置为

true

登录后复制

时，它告诉浏览器你的事件监听器不会调用

preventDefault()

登录后复制

，这样浏览器就可以在你的事件处理函数执行之前就进行默认的滚动操作，从而提升滚动性能。但如果你需要阻止默认行为，比如实现自定义滚动，那么就必须设置为

false

登录后复制

（或不设置，因为默认就是

false

登录后复制

），否则

preventDefault()

登录后复制

将无效并可能抛出警告。

鼠标滚轮事件的兼容性与老旧方案还有必要了解吗？

当然，了解一下历史总不是坏事，尤其是在需要支持一些非常老的浏览器环境时。不过，对于现代Web开发而言，

wheel

登录后复制

事件已经是事实上的标准，并且拥有非常好的浏览器支持。

在

wheel

登录后复制

事件出现之前，主要有两种非标准的滚轮事件：

mousewheel
登录后复制
事件: 这是IE和WebKit（包括Chrome、Safari）浏览器早期使用的事件。它通过
```
event.wheelDelta
```
登录后复制
属性来表示滚动量，通常是120的倍数，正值表示向上或向左滚动，负值表示向下或向右滚动。水平滚动则通过
```
event.wheelDeltaX
```
登录后复制
和
```
event.wheelDeltaY
```
登录后复制
来区分。
DOMMouseScroll
登录后复制
事件: 这是Firefox早期使用的事件。它通过
```
event.detail
```
登录后复制
属性来表示滚动量，通常是3的倍数，正值表示向下或向右滚动，负值表示向上或向左滚动。方向与
```
wheelDelta
```
登录后复制
是相反的，需要注意。

这两种老旧事件在处理滚动方向和量化单位上都有所不同，导致跨浏览器兼容性代码写起来比较麻烦。比如，你需要判断是哪个事件被触发，然后根据不同的属性和方向约定来计算实际的滚动。

现在，如果不是有特别的历史项目包袱，我个人倾向于直接使用

wheel

登录后复制

事件。它统一了API，并且提供了更精确的像素级滚动信息，避免了那些烦人的兼容性判断。如果你实在需要兼容老旧浏览器，可以考虑使用一些成熟的库，或者自己写一个简单的事件兼容层，但坦白说，这在当前已经很少见了。

如何精确控制滚轮滚动速度或实现平滑滚动？

直接使用

event.deltaY

登录后复制

或

event.deltaX

登录后复制

来修改元素的

scrollTop

登录后复制

或

scrollLeft

登录后复制

属性，虽然能实现滚动，但效果往往是生硬的、跳跃式的。要实现平滑滚动，我们需要引入动画的概念。

核心思路是：当滚轮事件触发时，我们不是立即跳到最终位置，而是计算一个目标位置，然后通过一个定时器（或更推荐的

requestAnimationFrame

登录后复制

）在一段时间内逐步地、平滑地移动到那个位置。

一个简单的平滑滚动实现可能涉及以下步骤：

确定目标位置: 根据
```
event.deltaY
```
登录后复制
登录后复制
计算出新的滚动目标位置。例如，如果当前滚动位置是
```
currentScrollTop
```
登录后复制
，
deltaY
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
是50，那么目标位置就是
```
currentScrollTop + 50
```
登录后复制
。
使用
requestAnimationFrame
登录后复制
登录后复制
登录后复制
登录后复制
: 这是浏览器优化动画的最佳实践。它会在浏览器下一次重绘之前调用你的回调函数，确保动画流畅且不占用过多CPU资源。
逐步调整: 在
requestAnimationFrame
登录后复制
登录后复制
登录后复制
登录后复制
的回调中，计算当前滚动位置与目标位置之间的差值，然后每次只移动其中的一小部分（例如，差值的10%）。重复这个过程直到接近目标位置。

let isScrolling = false;
let currentScrollTop = 0; // 假设从0开始或者获取当前元素的scrollTop

function smoothScroll(targetScrollTop) {
    if (isScrolling) return; // 避免重复触发动画

    isScrolling = true;
    const startTime = performance.now();
    const duration = 300; // 动画持续时间，单位毫秒
    const startScrollTop = currentScrollTop;

    function animateScroll(currentTime) {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1); // 动画进度0到1

        // 使用缓动函数（例如，ease-out quard）让动画更自然
        const easedProgress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;

        currentScrollTop = startScrollTop + (targetScrollTop - startScrollTop) * easedProgress;

        // 应用到元素上，这里假设是body或html元素
        document.documentElement.scrollTop = currentScrollTop;
        document.body.scrollTop = currentScrollTop; // 兼容性考虑

        if (progress < 1) {
            requestAnimationFrame(animateScroll);
        } else {
            isScrolling = false;
        }
    }
    requestAnimationFrame(animateScroll);
}

// 假设我们监听的是window的滚轮事件
window.addEventListener('wheel', function(event) {
    event.preventDefault(); // 阻止默认滚动

    currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const delta = event.deltaY;
    const scrollStep = 100; // 每次滚轮事件移动的距离

    let target = currentScrollTop + (delta > 0 ? scrollStep : -scrollStep);

    // 确保目标位置不会超出文档范围
    const maxScrollTop = document.documentElement.scrollHeight - window.innerHeight;
    target = Math.max(0, Math.min(target, maxScrollTop));

    smoothScroll(target);
}, { passive: false });

登录后复制

这段代码只是一个简化示例，实际应用中你可能需要考虑更复杂的边界情况、多元素滚动、以及更丰富的缓动函数。但核心思想就是通过

requestAnimationFrame

登录后复制

来逐步调整滚动位置，而不是一次性跳变。

处理滚轮事件时常见的坑与优化技巧有哪些？

在实际项目中处理滚轮事件，除了基本的监听和阻止默认行为，还有一些陷阱需要规避，以及一些优化策略可以提升用户体验和性能。

性能陷阱：频繁触发与事件节流/防抖 鼠标滚轮事件触发非常频繁，尤其是在用户快速滚动时。如果不加以限制，每次事件都执行复杂的计算或DOM操作，很容易导致页面卡顿。
- 节流 (Throttling)：在一段时间内（比如200ms）只执行一次事件处理函数。适用于需要持续响应但不需要每次都处理的场景。
- 防抖 (Debouncing)：在事件停止触发一段时间后才执行一次事件处理函数。适用于只在事件完全结束后才需要处理的场景（例如，用户停止滚动后才加载更多内容）。在上面的平滑滚动示例中，
```
isScrolling
```
  登录后复制
  标志就是一个简单的节流机制，避免在动画进行中再次触发新的动画。更通用的节流/防抖函数通常会这样实现：
```
// 简单的节流函数
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 将滚轮事件处理函数包装起来
// window.addEventListener('wheel', throttle(myWheelHandler, 100), { passive: false });
```
登录后复制
在现代前端框架或库中，通常会提供更完善的节流/防抖工具函数。
```
passive
```
登录后复制
登录后复制
登录后复制
选项的正确使用 前面提到过
```
{ passive: false }
```
登录后复制
。如果你的滚轮事件处理函数不调用
```
event.preventDefault()
```
登录后复制
，那么强烈建议将
```
passive
```
登录后复制
登录后复制
登录后复制
设置为
```
true
```
登录后复制
登录后复制
。
```
window.addEventListener('wheel', myHandler, { passive: true });
```
登录后复制
这会告诉浏览器：这个事件监听器不会阻止默认的滚动行为，浏览器可以放心地提前优化滚动，从而避免潜在的卡顿。如果你的自定义逻辑只是响应滚动，而不是阻止它，那么
```
passive: true
```
登录后复制
是性能优化的关键。
焦点与可访问性 (Accessibility) 当你接管了默认的滚轮行为，特别是实现自定义滚动条或页面滚动时，很容易破坏原生的键盘导航和屏幕阅读器功能。
- 键盘导航: 确保用户仍然可以通过键盘（如方向键、PageUp/PageDown、Spacebar）来滚动页面或元素。这通常意味着你需要监听这些键盘事件，并调用相应的滚动逻辑。
- 焦点管理: 确保用户可以通过Tab键聚焦到所有可交互元素。
- 语义化HTML: 尽量使用原生的可滚动元素（如
```
div
```
  登录后复制
  设置
```
overflow: auto
```
  登录后复制
  ），而不是完全自定义一个滚动容器，这样可以最大限度地保留原生的可访问性。如果必须自定义，确保使用ARIA属性来增强语义。
多设备与触控板行为差异 不同鼠标、不同操作系统以及触控板的滚动行为可能存在微妙差异。例如，有些触控板的滚动会发送非常小的
deltaY
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
值，或者在滚动结束后有一个惯性滑动。你的代码需要足够健壮，能够适应这些差异。
- 阈值判断: 对于非常小的
  deltaY
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  登录后复制
  值，可以考虑忽略，避免不必要的动画或操作。
- 惯性滚动: 如果需要模拟惯性滚动，这会使你的平滑滚动逻辑变得更复杂，可能需要计算速度和衰减。
与其他事件或库的冲突 页面上可能有其他脚本或第三方库也在监听滚轮事件。这可能导致行为冲突或意想不到的副作用。
- 命名空间: 如果可能，将你的滚轮处理逻辑限制在特定的元素或组件内，避免全局监听
```
window
```
  登录后复制
  登录后复制
  或
```
document
```
  登录后复制
  登录后复制
  。
- 事件委托: 如果需要处理多个子元素的滚轮，可以考虑在父元素上进行事件委托，但要确保事件冒泡行为符合预期。