鼠标滑轮控制Div水平滚动

最新推荐文章于 2023-12-27 17:06:25 发布

Qiustion

最新推荐文章于 2023-12-27 17:06:25 发布

阅读量5.9k

点赞数 2

分类专栏： HTML5+CSS3+JS

本文链接：https://blog.csdn.net/Qiustion/article/details/71713804

版权

HTML5+CSS3+JS 专栏收录该内容

15 篇文章 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>

<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