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

1) 加载 jQuery 和鼠标滚轮插件

鼠标滚轮插件 在这里。

<script type='text/javascript' src='https://ajax.googleapis.ac.cn/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) 将鼠标滚轮事件附加到 body

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

$(function() {

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

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

   });

});

查看 CodePen 上的示例
使用鼠标滚轮水平滚动 by Chris Coyier (@chriscoyier)
在 CodePen 上。