鼠标控制横向滑轮事件

最新推荐文章于 2023-04-11 18:11:00 发布

Gofery

最新推荐文章于 2023-04-11 18:11:00 发布

阅读量542

点赞数

分类专栏：前端JS

前端JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

 
 //这个例子写的挺好的：
<!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>  
 

 
   [javascript]  
   view plaincopy
<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>   