html如何设置滑轮_HTML滚轮（wheel事件）交互与滚动控制方法-html教程-PHP中文网

html如何设置滑轮_HTML滚轮（wheel事件）交互与滚动控制方法

星夢妙者

发布： 2025-11-01 07:39:34

原创

814人浏览过

通过监听wheel事件可实现自定义滚动交互，利用deltaY和deltaX获取滚动手势，结合preventDefault阻止默认行为，并操作scrollTop实现精确控制，配合requestAnimationFrame实现平滑滚动效果。

html如何设置滑轮_html滚轮（wheel事件）交互与滚动控制方法

在网页开发中，通过监听鼠标滚轮事件（wheel 事件）可以实现自定义的滚动交互效果。这不仅可用于控制页面或元素的滚动行为，还能用于缩放、切换内容等操作。下面介绍如何使用 HTML 和 JavaScript 实现滚轮事件的监听与滚动控制。

监听 wheel 事件

wheel 事件在用户滚动鼠标滚轮时触发，可以通过 addEventListener 绑定到任意可滚动元素或整个文档。

事件对象包含 deltaY、deltaX、deltaMode 等属性，用于判断滚动方向和幅度
默认情况下，浏览器会根据滚轮输入自动滚动，可通过 preventDefault() 阻止默认行为

示例代码：

element.addEventListener('wheel', function(e) {
  e.preventDefault();
  console.log('垂直滚动:', e.deltaY);
  console.log('水平滚动:', e.deltaX);
});

登录后复制

控制元素滚动位置

结合 wheel 事件，可以手动控制元素的 scrollTop 或 scrollLeft 属性来实现精确滚动。

立即学习“前端免费学习笔记（深入）”；

对特定容器设置 overflow: auto 或 overflow: scroll，使其可滚动
在事件中累加 delta 值并更新滚动位置

示例：防止页面默认滚动，由 JS 控制容器滚动

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

const container = document.querySelector('.scroll-container');
<p>container.addEventListener('wheel', function(e) {
e.preventDefault();
container.scrollTop += e.deltaY;
});

登录后复制

实现平滑滚动效果

直接跳转滚动可能显得生硬，可通过 requestAnimationFrame 实现平滑动画。

思路是记录目标滚动偏移量，逐步逼近目标值。

let targetScroll = 0;
let currentScroll = 0;
<p>container.addEventListener('wheel', function(e) {
e.preventDefault();
targetScroll += e.deltaY * 0.5; // 调整灵敏度
smoothScroll();
});</p><p>function smoothScroll() {
currentScroll += (targetScroll - currentScroll) * 0.1;
container.scrollTop = currentScroll;</p><p>if (Math.abs(targetScroll - currentScroll) > 0.5) {
requestAnimationFrame(smoothScroll);
}
}

登录后复制