jquery水平滚动鼠标滚轮答案

【问题标题】：jquery horizontal scroll with mousewheeljquery水平滚动鼠标滚轮
【发布时间】：2010-05-15 23:02:43
【问题描述】：

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

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

【问题讨论】：

标签： jquery scroll mousewheel

【解决方案1】：

我刚刚回答了this question 关于水平滚动 div 的问题，我还包含了一些代码来使用鼠标滚轮或者只是用鼠标抓取和拖动......也许其中一些代码会给你一个想法？

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

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

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

【讨论】：

我明白你在说什么，但我不明白实际的“滚动”部分。在您的另一篇文章中，我看到 this.scrollLeft -= (delta * 30);但我不能让它在我的工作。我希望整个窗口滚动而不是只滚动一个 div，所以我尝试将 ('#container') 更改为 (window)。
我不确定这是否正确，但我可以在其他浏览器中使用它：$(window).bind('mousewheel', function(event,delta){ if (delta > 0) { window.scrollBy(-80,0); } 否则 window.scrollBy(80,0) ; });但它在 Chrome 中似乎相当有问题......
当时我想这只是我的电脑。一切都很好，谢谢你:)

【解决方案2】：

我在 cmets 中使用了 $(window).bind 方法，但它不会向后滚动，只能向前滚动，在轮子上上下滚动。

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

【讨论】：

【解决方案3】：

上述 cmets 中的此解决方案有效，但仅当将鼠标悬停在页面上的实际元素上时。

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

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

【讨论】：