jquery水平滚动鼠标滚轮

问题描述：

我目前有一个网站，是一个sidescroller（http://www.studioimbrue.com），我试图绑定滚动鼠标滚动横盘。目前我使用的是在thehorizontalway.com上找到的一个（称为thw.js），但它似乎不适用于所有浏览器（Chrome）。jquery水平滚动鼠标滚轮

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

答

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

为了阐述一下，mousewheel函数为您提供了事件对象和增量。

$('#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'）到（窗口）。 – steve 2010-05-16 19:19:52

我不确定这是否正确，但我通过以下方式在其他浏览器中正常工作： $（window）.bind（'mousewheel'，function（event，delta）{if（delta> 0）{ window.scrollBy（-80,0）; } else window.scrollBy（80,0）; }）; 但它似乎在Chrome中很漂亮... – steve 2010-05-16 19:34:58

你是什么意思的越野车？ – Mottie 2010-05-16 23:30:56

答

我在注释中使用了$（window）.bind方法，但它不会向后滚动，只能向前和向下滚动在*上。

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

答

上述评论的这种解决方案的工作原理，但只有当在页面上的实际元素被模糊。

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

如果只是鼠标放在空的空间（例如，如果你的内容很短，而且有一些窗口在底部留下的），它会连续工作约一个滚动，再突破（直到你回滚左），这就是为什么人们会认为滚动只能以一种方式进行。这也似乎是人们推荐的所有花式滚动插件的情况。希望这有助于人们在未来找到解决方案。

jquery水平滚动鼠标滚轮

相关推荐