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

Question

您好，我正在使用 jQuery 鼠标滚轮扩展

和它使用以下绑定

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

增量由鼠标滚轮移动和页面水平滚动决定。

一切都很好，除了当您将光标移动到没有文本或图像的空白区域（通常没有 html 元素）时，鼠标滚轮移动突然没有响应。我确信这是因为绑定的工作方式。

我制作了一个不可见的 100% x 100% 固定 pos div 来测试我的理论，并且滚动可以完美地工作。虽然这对我来说似乎是一种黑客攻击，但我想知道这段代码的正确实现。

我怎样才能让这个函数在整个浏览器页面上被调用？

太感谢了！

更新：David主动在这里用他的代码做了一个测试页面。谁能告诉我这对你是否和对他一样有效？它对我不起作用，也就是说，只有当我的指针位于红色矩形上方时，我才能水平滚动页面。

Answer 1

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

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

Answer 2

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

CSS

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

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

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

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

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