js鼠标滚轮事件(mousewheel/DOMMouseScroll)

Ooo_My_God发表于 分类:javascript 阅读(3645) 评论(3)

简介:

鼠标滚轮事件主要分为FireFox派和其他派。

1、mousewheel与DOMMouseScroll

1、mousewheel

IE6首先实现了mousewheel事件。此后,Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome及Safari)对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta属性。当用户向上滚动鼠标滚轮时,wheelDelta是120的倍数;当用户向下滚动鼠标滚轮时,wheelDelta是-120的倍数。

2、DOMMouseScroll

Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚轮滚动时触发。与mousewheel事件一样,DOMMouseScroll也被视为鼠标事件,因而包含于鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中,当向上滚动鼠标滚轮时,这个属性的值是-3的倍数,当向下滚动鼠标滚轮时,这个属性的值是3的倍数。火狐内核FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值,而其他浏览器是负值。

2、具体实现

1、javascript

2、jquery

3、结束语

本文有任何错误,或有任何疑问,欢迎留言说明。

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/516

相关推荐

评论

  1. 现在的chrome,他的wheelDelta值好像和火狐相同了,向上为-3的倍数,向下为3的倍数?

  2. 想请问下mousewheel、DOMMouseScroll事件和scroll事件的区别,除了他们事件对象返回值不一样之外,鼠标滚轮滚动时,scroll事件和mousewheel事件都会被触发。

输入关键字