鼠标滑轮控制Div水平滚动

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

  • 2
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值