使用鼠标滚轮实现jQuery水平滚动

Question

我目前有一个侧向滚动的网站(http://www.studioimbrue.com)，我想绑定鼠标滚轮来进行横向滚动。目前我正在使用在thehorizontalway.com找到的(thw.js)，但它似乎不能在所有浏览器（Chrome）中正常工作。

我尝试让这个工作：http://brandonaaron.net/code/mousewheel/docs ，只是滚动整个窗口，没有别的。文档非常有限，所以我无法弄清楚。任何帮助都将不胜感激。

- steve

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

- Mottie

---

我明白你的意思，但是我不理解实际的“滚动”部分。在你的另一篇帖子中，我看到了这个：this.scrollLeft -= (delta * 30); 但是我无法在我的代码中让它起作用。我想要整个窗口滚动而不仅仅是一个div，所以我尝试将('#container')更改为(window)。 - steve

我不确定这是否正确，但我在其他浏览器中使用以下代码使其工作： $(window).bind('mousewheel', function(event,delta){ if (delta > 0) { window.scrollBy(-80,0); } else window.scrollBy(80,0) ; });但在Chrome中似乎有很多错误... - steve

我认为那只是我的电脑在那一刻出了问题。一切都好，谢谢 :) - steve

Answer 2

我在评论中使用了$(window).bind方法，但它只能向前滚动，无法向后滚动，对于鼠标滚轮的上下滚动都是如此。

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

- Spencer

Answer 3

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

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

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

- Flickerdart