JS中的鼠标滚轮事件（onmousewheel、判断滚动的wheelDelta、detail，取消浏览器默认行为的preventDefault()方法）

最新推荐文章于 2024-08-14 17:15:24 发布

Fantasc

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量9.2k

点赞数 2

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119619584

版权

本文介绍了JavaScript中的鼠标滚轮事件，包括onmousewheel、DOMMouseScroll事件及如何判断滚动方向。同时，讨论了如何使用event.wheelDelta和event.detail在不同浏览器中获取滚动方向，并解释了在不同情况下如何使用return false和event.preventDefault()来取消浏览器默认的滚动行为。

摘要由CSDN通过智能技术生成

onmousewheel事件：会在鼠标滚轮滚动的时候被触发，对鼠标滚轮是否滚动进行判断，但是火狐浏览器不支持这个属性。DOMMouseScroll可以为火狐浏览器绑定滚动事件，它需要通过addEventListener函数来绑定。
event.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。火狐浏览器不支持这个方法，需要会用event.detail来获取滚轮的滚动方向，向上是负值，向下是正值。
在页面有滚动条的时候，滚动条会随着鼠标滚轮滚动而滚动，这是浏览器的默认行为，可用return false来取消浏览器的默认行为。
- 使用addEventListener函数来绑定的响应函数，不能使用return false来取消浏览器的默认行为，需要使用event.preventDefault来取消默认行为，ie8中使用event.preventDefault来取消默认行为会报错。
```
绑定的对象.addEventListener(事件字符串,回调函数,false);

event.preventDefault;//在使用addEventListener来绑定响应函数的时候取消浏览器默认行为
```

以下是练习的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"</

最低0.47元/天解锁文章

Fantasc

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录