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/