将滚轮事件从可滚动容器传播到窗口

Question

问题

我有一个可水平滚动的元素（使用overflow-x: scroll;）。如果我将鼠标悬停在它上面并使用鼠标滚轮（垂直），它将不会导致任何操作 - 因为可滚动的元素会捕获鼠标滚轮。

我希望在该元素上使用鼠标滚轮滚动以向上/向下滚动窗口，就像该元素不可滚动一样。

考虑的解决方案

我尝试使用wheel 事件并在垂直滚动时阻止默认设置，但它什么也没做。

我也考虑过捕获deltaY 的scroll 事件并使用它来手动滚动带有window.scrollTo() 的窗口，但是，我担心每个浏览器/操作系统可能有不同的滚动实现，这很难在所有平台上可靠地复制行为。

在一些滚动库的帮助下手动实现滚动行为，而不是在浏览器上中继 - 这是最后的手段。

问题

有没有办法以某种方式将该轮事件传播到父（窗口）？

Answer 1

你只需要告诉元素不要听垂直滚动。默认情况下，该属性为visible，但有一个例外：

将一个轴设置为可见（默认），而将另一个轴设置为不同的值会导致可见行为为自动。 (MDN Webdocs)

这意味着您需要显式设置overflow-y: hidden 以获得您想要的行为。

body{
  height: 1000px;
}
#outer{
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
}
#hscroll{
  width: 500px;
  height: 500px;
 }

<div id="outer"><div id='hscroll'><p>Scrollme</p></div></div>