鼠标滑轮控制Div水平滚动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>滑轮控制Div水平滚动</title><style type="text/css">.wrap{width:500px;height:80px;background:#e7e7e7;overflow: auto;overflow-y: hidden;}.hor_box{width:1200px;height:50px;}.btn{width:100px;height:50px;background:#ff9900;float:left;margin:3px 10px;}.ver_box{width:100px;height:500px;overflow: auto;overflow-x: hidden;}.ver_box .btn{width:90px;height:50px;margin:5px 0px;}</style>
</head>
<body><div id="abc" class="wrap"><div id="scrollbar" class="hor_box"><div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div></div></div>
</body>
</html>

<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript">var firefox = navigator.userAgent.indexOf('Firefox') != -1; function MouseWheel(e){e=e||window.event;if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;}// document.title=(e.wheelDelta+'|'+e.detail);if(firefox){if(e.detail<0){$('#abc').scrollLeft($('#abc').scrollLeft()+60);}else{$('#abc').scrollLeft($('#abc').scrollLeft()-60);}         }else{if(e.wheelDelta>0){$('#abc').scrollLeft($('#abc').scrollLeft()+60);}else{$('#abc').scrollLeft($('#abc').scrollLeft()-60);}}}window.οnlοad=function(){var abc=document.getElementById('abc');firefox?abc.addEventListener('DOMMouseScroll',MouseWheel,false):(abc.onmousewheel=MouseWheel);}
</script>

注：由于 Firefox浏览器的鼠标滑轮机制与IE, Oprea, Chrome等浏览器不一样，需要预先判断当前浏览器的类型
在窗体初始化时，对id="abc"的Div监听滑轮的事件
e.detail 事件是Firefox的DOMMouseScroll
e.wheelDelta 是其他浏览器

参考“mousewheel滚轮事”：http://www.bkjia.com/jQuery/821747.html

鼠标滑轮控制Div水平滚动相关推荐

js 鼠标滑轮控制左右横向滚动
代码的实现通过jquery监听滑轮滚动,不推荐原生实现,原生实现还要处理不同浏览器监听的方式和兼容性,jquery已经帮我们做了很多处理了. 代码: <!DOCTYPE html> < ...
VTK-医学三维图像四视图显示以及鼠标滑轮控制切片交互
VTK-医学三维图像四视图显示以及鼠标滑轮控制切片交互一.四视图介绍 vs直接创建Qt Widgets Application项目四视图界面,采用vtk和QVTKOpenGLNativeWidge ...
控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
pycharm 用鼠标滑轮控制代码放大缩小的设置
pycharm 用鼠标滑轮控制代码放大缩小的设置 1.首先点击file选择settings 2.点击settings进入界面选择keymap 3.输入dec点击第一个 4.鼠标右击点击第二个 5. 按 ...
js控制div内部滚动内容横向滑动位置
js控制div内部滚动内容横向滑动位置使用 js控制div内部的滚动内容横向滑动,主要应用在移动端,项目是基于angularJS,所以带有angular的点击方法ng-click,可以用原生js替换 ...
WPF 使用鼠标滚轮控制ListBox水平滚动条滚动
我们都知道在WPF中鼠标滚轮可以控制垂直滚动条滚动,但没有什么属性设置可以让它控制水平滚动条滚动,所以我们需要自己去实现水平滚动. 首先,在ListBox的Mousewheel事件中获得ListBox ...
unity通过鼠标滑轮控制物体大小
//缩放量 float scale = 0.2f; void Update() { //通过键盘滑轮控制物体的缩放 if (Input.GetA ...
elementui表格鼠标滑轮控制横向滚动
表格内容过多,拖动横向滚动条又需要拉到页面最下面,再回头查看数据,操作起来很不方便,所以做一个滚轮控制横向滚动 data(){return{domObj:null} },mounted() {//id ...
java响应鼠标滚轮事件_javascript滚动条响应鼠标滑轮的实现上下滚动事件
实现鼠标滚动滚轮事件: var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e ...

鼠标滑轮控制Div水平滚动

鼠标滑轮控制Div水平滚动相关推荐

最新文章

热门文章