使用鼠标滚轮水平滚动页面

1）加载jQuery和Mouse Wheel插件

鼠标滚轮插件在这里 。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2）将鼠标滚轮事件附加到主体

“ 30”代表速度。 preventDefault确保页面不会向下滚动。

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});

看笔
克里斯· 科耶尔 （ @Chriscoyier ） 用鼠标滚轮进行水平滚动
在CodePen上 。

翻译自: https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/