滚轮滑动实现左右移动

最新推荐文章于 2024-04-29 11:45:01 发布

cool_宇恒

最新推荐文章于 2024-04-29 11:45:01 发布

阅读量634

点赞数 2

本文链接：https://blog.csdn.net/MycoolMy/article/details/128038917

版权

<html>
  <head>
    
<style>
  .box {
    width: 400px;
    height: 50px;
    white-space:nowrap;
    overflow:auto;
    border:1px solid red;
  }
  .box::-webkit-scrollbar{display:none;}
  .item {
    height: 50px;
    display:inline-block;
    width:50px;
    border: 1px solid blue;
  }
</style>
  </head>
  <body>
    <div class="box" id="box">
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
      <span class="item">11</span>
    </div>

<script type='application/javascript'>
    // 使用类名获取的时候需要进行遍历 类名获取的是DOM中的数组  ID获取的是唯一一个DOM
    var entry = document.getElementById('box');
  function myBrowser() {
        // var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) { //判断是否Opera浏览器
            return "Opera"
        }
        ;
        if (userAgent.indexOf("Firefox") > -1) { //判断是否Firefox浏览器
            return "FF";
        }
        ;
        if (userAgent.indexOf("Chrome") > -1) {
            return "Chrome";
        }
        ;
        if (userAgent.indexOf("Safari") > -1) { //判断是否Safari浏览器
            return "Safari";
        }
        ;
        // if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { //判断是否IE浏览器
            return "IE";
        // }
        // ;
    }
    var myWindow = myBrowser()
    // 这里进行遍历
    if (myWindow === 'Chrome' ||myWindow === 'FF'|| myWindow === 'Opera' || myWindow === 'Safari') {
        // 每个DOM对象
        entry.onwheel = function(event){
            event.preventDefault();
            var step = 50;
            if(event.deltaY < 0){
                this.scrollLeft -= step;
            } else {
                this.scrollLeft += step;
            }
        }
    }
    else {
        entry.onmousewheel  = function(WheelEvent){
            WheelEvent.preventDefault();
            var step = 50;
            if(WheelEvent.wheelDelta < 0){
                this.scrollLeft -= step;
            } else {
                console.log(WheelEvent.wheelDelta)
                this.scrollLeft += step;
            }
        }
    }
</script>
  </body>
</html>