鼠标滚轮控制指定 DIV 左右滚动

发布于：

鼠标滚轮控制指定 DIV 左右滚动

<!DECTYPE html>
  <html>

  <head>
    <meta charset=‘utf-8’>
    <title>onwheel-test</title>
  </head>

  <body>
    <div id='out' style='width:500px;height:500px;overflow:auto'>
      <div id='inside' style='width:1000px;height:1000px;background-color:gray;overflow:auto'>
      </div>
    </div>

    <script type='application/javascript'>
      var outDiv = document.getElementById('out');
      outDiv.onwheel = function (event) {
        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）  
        event.preventDefault();
        //设置鼠标滚轮滚动时屏幕滚动条的移动步长  
        var step = 50;
        if (event.deltaY < 0) {
          //向上滚动鼠标滚轮，屏幕滚动条左移  
          this.scrollLeft -= step;
        } else {
          //向下滚动鼠标滚轮，屏幕滚动条右移  
          this.scrollLeft += step;
        }
      }
      /**
          // 如果要手动设置滚动条在Y轴方向的位置可以直接设置scrollTop,例如：
          outDiv.scrollTop = 500;
          // 如果要手动设置滚动条在X、Y轴方向的位置可以使用函数scrollTo,例如设置X轴滚动100，Y轴滚动400：
          outDiv.scrollTo(100,400);
      **/
    </script>
  </body>

  </html>