鼠标滑轮控制Div水平滚动

来源：互联网发布：js text readonly 编辑：程序博客网时间：2024/05/27 21:08

<!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.onload=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

0 0