Question

并使用以下绑定

$('html').bind('mousewheel', function(event, delta) {
  window.scrollBy(-120 * delta, 0);
  return false;
});

delta由鼠标滚轮移动决定，页面水平滚动。

一切都很好，除非你将光标移动到没有文字或图像的空白区域，通常没有html元素，然后鼠标轮移动突然没有响应。我很肯定这是因为绑定是如何工作的。

我通过100％固定的pos div制作了一个不可见的100％来测试我的理论，滚动效果会非常好。虽然这看起来像是一个黑客，我想知道这个代码的正确实现。

如何在浏览器页面上调用此功能？

非常感谢你！

更新：David主动使用代码here制作测试页。任何人都可以告诉我它是否适合你，就像它对他一样？它对我不起作用，即只有当我的指针位于红色矩形上时，我才能水平滚动页面。

Answer 1

您是否尝试将其绑定到document或window？

$(document).bind('mousewheel', function(event, delta) {
  window.scrollBy(-120 * delta, 0);
  return false;
});

Answer 2

我遇到了完全相同的问题并设法解决，请参阅this eg。

CSS

html,body
{
    width:100%;
    height:100%;
    overflow:hidden;
    margin:0;
    padding:0;
}

#wrapper
{
    width:100%;
    height:100%;
    overflow:auto;
}

请注意，您需要将鼠标滚轮事件应用于#wrapper元素。

这允许包装元素在依赖html或body之前保留可能未被占用的空间。

您可能会注意到宽度是由表定义的，我发现这是水平网页中最好的方法。

如何使jQuery选择器在整个浏览器窗口中工作

2 个答案: