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

最新推荐文章于 2024-05-24 14:55:20 发布

Fantasc

最新推荐文章于 2024-05-24 14:55:20 发布

阅读量9k

点赞数 2

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

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

版权

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"</

关注