Js控制滑轮左右滑动实例
更新时间：2015年02月13日 11:08:48 投稿：junjie
这篇文章主要介绍了Js控制滑轮左右滑动实例,本文直接给出实现代码,需要的朋友可以参考下
今天弄了一个东西，页面本来是横向，所以底部有横向滚动条，竖着就没有滚动条了，现在要求是鼠标滑轮要左右滚动，这就需要写js代码来实现了，写这个的过程中遇到很大麻烦
ie 火狐 chrome 三个浏览器支持的函数完全不一样，真是疯啦。
这里有几个知识点说明一下
监控滑轮的事件
ie:onmousewheel
firfox:DOMMouseScroll
chrome:mousewheel
哎真是无语
滚动的返回值也是不一样的
firfox用detail 返回 +-3
其他的用wheelDelta 返回 +-120
有返回值判断滚动的方向
还有一般浏览器除了chrome判断页面的左移动用document.documentElement.scrollLeft
但是chrome浏览器要用document.body.scrollLeft
好了代码分享如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="test" style="width:3000px; height:500px; background:#666;"></div>
<script language="javascript">
var dbody=document.getElementById('test');
//ff用
objAddEvent(document,'DOMMouseScroll', function(e){return mouse_scroll(e);})
//非ff chrome 用
objAddEvent(document,'mousewheel', function(e){return mouse_scroll(e);})
//chrome用
objAddEvent(dbody,'mousewheel', function(e){return mouse_scroll(e);})
function mouse_scroll(e){
e=e || window.event;
var delD=e.wheelDelta?e.wheelDelta: -e.detail*40;//判断上下方向
var move_s=delD>0?-50:50;
document.documentElement.scrollLeft+=move_s; //非chrome浏览器用这个
//chrome浏览器用这个
if(document.documentElement.scrollLeft==0)document.body.scrollLeft+=move_s;
return false;
}
//这个是给对象增加监控方法的函数
function objAddEvent(oEle, sEventName, fnHandler)
{
if(oEle.attachEvent) oEle.attachEvent('on'+sEventName, fnHandler);
else oEle.addEventListener(sEventName, fnHandler, false);
}
</script>
</body>
</html>
这个代码其实有点问题就是在chrome浏览器下只有鼠标放到那个灰色内才能滑动，这个问题我一直没有解决掉，如果那个高手解决可以留言告诉我，谢谢了。
相关文章
实现一个五子棋游戏, 简要分析其原理, 页面并没有很花哨, 原理搞懂了, 后面的就是很轻松的事了,本文给大家介绍了如何用纯JS实现一个五子棋游戏,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了js打开word文档预览操作,结合实例形式分析了两种javascript打开word文档在线预览相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了webpack中如何加载静态文件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
js类 from qq...2006-11-11
下面小编就为大家带来一篇Javascript获取随机数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最近的网站要求使用二级菜单，本着“能用别人的就用别人的，不能用别人的就用自己的”的原则，在网上找到一个经典的使用CSS制作的二级菜单，感觉不错，先记录下来，以备它用。2009-06-06
这篇文章主要为大家详细介绍了JavaScript实现Fly Bird小游戏的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
用javascript控制iframe滚动的代码...2007-04-04
今天总结下学习和开发中遇到的JavaScript执行顺序的问题，今天挖个坑，以后会慢慢填，也希望抛砖引玉，能学到更多的东西。2011-06-06
这篇文章主要为大家详细介绍了js实现随机点名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
最新评论