欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Js控制滑轮左右滑动实例_javascript技巧

程序员文章站 2022-05-12 15:06:27
...
今天弄了一个东西,页面本来是横向,所以底部有横向滚动条,竖着就没有滚动条了,现在要求是鼠标滑轮要左右滚动,这就需要写js代码来实现了,写这个的过程中遇到很大麻烦

ie 火狐 chrome 三个浏览器支持的函数完全不一样,真是疯啦。

这里有几个知识点说明一下
监控滑轮的事件
ie:onmousewheel
firfox:DOMMouseScroll
chrome:mousewheel
哎真是无语
滚动的返回值也是不一样的
firfox用detail 返回 +-3
其他的用wheelDelta 返回 +-120
有返回值判断滚动的方向

还有一般浏览器除了chrome判断页面的左移动用document.documentElement.scrollLeft
但是chrome浏览器要用document.body.scrollLeft

好了代码分享如下:




无标题文档

这个代码其实有点问题就是在chrome浏览器下只有鼠标放到那个灰色内才能滑动,这个问题我一直没有解决掉,如果那个高手解决可以留言告诉我,谢谢了。