jquery 用鼠标滚轮水平滚动

Question

我目前有一个横向卷轴网站 (http://www.studioimbrue.com)，我尝试绑定鼠标滚轮以横向滚动。目前，我正在使用 thehorizo​​ntalway.com 上找到的一个（称为 thw.js），但它似乎不适用于所有浏览器（Chrome）。

我正在尝试让这个工作： http://brandonaaron.net/code/mousewheel/docs ，只需滚动整个窗口，仅此而已。文档非常有限，所以我无法弄清楚。任何帮助表示赞赏。

Answer 1

我刚刚回答了关于水平滚动 div 的这个问题，我还包括一些使用鼠标滚轮或仅用鼠标抓取和拖动的代码...也许其中一些代码会给您一个想法？

详细地说，鼠标滚轮函数为您提供事件对象和增量。

$('#container').bind('mousewheel', function(event,delta){
 if (delta > 0) {
   // mousewheel is going up; 
 } else {
   // mousewheel is going down 
 }
});

delta 的值取决于您滚动滚轮的速度。如果你真的很努力的话，我已经看到了从+50到-50的范围：P

Answer 2

我在注释中使用了 $(window).bind 方法，但它不会向后滚动，只能向前滚动，无论是在滚轮上向上还是向下滚动。

<script>
    $(window).bind('mousewheel', function(event, delta) {
        if (delta > 0) { window.scrollBy(-80,0); 
        } else window.scrollBy(80,0) ; 
    });
</script>

Answer 3

上面评论中的解决方案有效，但仅当鼠标悬停在页面上的实际元素上时才有效。

$(window).bind('mousewheel', function(event, delta) {
    if (delta > 0) { window.scrollBy(-80,0); 
    } else window.scrollBy(80,0) ; 
});

当鼠标悬停在空白区域时（例如，如果您的内容非常短并且底部留有一些窗口），它将工作大约一个滚动，然后中断（直到您向左滚动），这就是为什么一个可能会认为滚动只有一种方式。人们为此推荐的所有花式滚动插件似乎也是这种情况。希望这可以帮助人们在未来找到解决方案。