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浏览器下只有鼠标放到那个灰色内才能滑动,这个问题我一直没有解决掉,如果那个高手解决可以留言告诉我,谢谢了。
推荐阅读
-
js控制不同的时间段显示不同的css样式的实例代码_javascript技巧
-
js 上下左右键控制焦点(示例代码)_javascript技巧
-
利用JS来控制键盘的上下左右键(示例代码)_javascript技巧
-
js 上下左右键控制焦点(示例代码)_javascript技巧
-
js实现简单的左右两边固定广告效果实例_javascript技巧
-
js实现简单的左右两边固定广告效果实例_javascript技巧
-
利用JS来控制键盘的上下左右键(示例代码)_javascript技巧
-
Js控制滑轮左右滑动实例_javascript技巧
-
Js控制滑轮左右滑动实例_javascript技巧
-
js实现点击左右按钮轮播图片效果实例_javascript技巧