JavaScript中事件机制中滚轮事件wheel怎么获取滚动方向并阻止默认的页面整页滚动-js教程-PHP中文网

准确判断滚动方向需监听wheel事件并读取deltay：deltay>0为向下滚动，deltay

javascript中事件机制中滚轮事件wheel怎么获取滚动方向并阻止默认的页面整页滚动

滚轮事件 wheel 的方向判断和默认行为阻止，关键在于监听 wheel 事件、读取 deltaY（或 deltaX），并调用 event.preventDefault()。

如何准确判断滚动方向

wheel 事件对象提供三个方向属性：deltaX、deltaY、deltaZ，其中最常用的是 deltaY：

deltaY > 0 表示向下滚动（页面内容向上移动）
deltaY 表示向上滚动（页面内容向下移动）
不同浏览器/设备可能使用不同单位（像素、行、页），但符号始终一致，方向判断可靠
建议优先用 deltaY，兼容性好；deltaX 用于水平滚动（如 Shift + 滚轮）

阻止默认整页滚动行为

调用 event.preventDefault() 可阻止浏览器默认的页面滚动，但需注意时机和条件：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

必须在事件处理函数中同步调用，异步（如 setTimeout）无效
推荐在满足自定义逻辑时再阻止，避免无条件阻止导致页面无法滚动
若仅想禁用某区域的滚动，可绑定到具体容器（如 div），而非 window
注意：阻止后需自行实现滚动逻辑（如 scrollTop 调整），否则该区域将“失敏”

基础代码示例

以下是一个监听容器内滚轮、阻止默认行为并打印方向的简洁写法：

const container = document.getElementById('my-container');
container.addEventListener('wheel', (e) => {
  if (e.deltaY > 0) {
    console.log('向下滚动');
  } else if (e.deltaY 
<p>若需兼容旧版 Firefox（<code>DOMMouseScroll</code>），现代项目通常无需额外处理，<code>wheel</code> 已全平台支持。</p>

<h3>注意事项与常见陷阱</h3>
<p>实际使用中容易忽略的关键点：</p>

passive: false 选项必须显式设置（尤其在 addEventListener 中），否则 preventDefault() 在某些浏览器（如 Chrome）中会被忽略
正确写法：element.addEventListener('wheel', handler, { passive: false })
不要在全局 window 上无差别阻止 wheel，否则用户将无法滚动页面主体
移动端不触发 wheel，应使用 touchstart/touchmove 或 scroll 事件替代

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南