Js控制滑轮左右滑动实例
今天弄了一个东西,页面本来是横向,所以底部有横向滚动条,竖着就没有滚动条了,现在要求是鼠标滑轮要左右滚动,这就需要写js代码来实现了,写这个的过程中遇到很大麻烦
ie火狐chrome三个浏览器支持的函数完全不一样,真是疯啦。
这里有几个知识点说明一下
监控滑轮的事件
ie:onmousewheel
firfox:DOMMouseScroll
chrome:mousewheel
哎真是无语
滚动的返回值也是不一样的
firfox用detail返回+-3
其他的用wheelDelta返回+-120
有返回值判断滚动的方向
还有一般浏览器除了chrome判断页面的左移动用document.documentElement.scrollLeft
但是chrome浏览器要用document.body.scrollLeft
好了代码分享如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档</title> </head> <body> <divid="test"style="width:3000px;height:500px;background:#666;"></div> <scriptlanguage="javascript"> vardbody=document.getElementById('test'); //ff用 objAddEvent(document,'DOMMouseScroll',function(e){returnmouse_scroll(e);}) //非ffchrome用 objAddEvent(document,'mousewheel',function(e){returnmouse_scroll(e);}) //chrome用 objAddEvent(dbody,'mousewheel',function(e){returnmouse_scroll(e);}) functionmouse_scroll(e){ e=e||window.event; vardelD=e.wheelDelta?e.wheelDelta:-e.detail*40;//判断上下方向 varmove_s=delD>0?-50:50; document.documentElement.scrollLeft+=move_s;//非chrome浏览器用这个 //chrome浏览器用这个 if(document.documentElement.scrollLeft==0)document.body.scrollLeft+=move_s; returnfalse; } //这个是给对象增加监控方法的函数 functionobjAddEvent(oEle,sEventName,fnHandler) { if(oEle.attachEvent)oEle.attachEvent('on'+sEventName,fnHandler); elseoEle.addEventListener(sEventName,fnHandler,false); } </script> </body> </html>
这个代码其实有点问题就是在chrome浏览器下只有鼠标放到那个灰色内才能滑动,这个问题我一直没有解决掉,如果那个高手解决可以留言告诉我,谢谢了。