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

Question

问题

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

我想在该元素上使用鼠标滚轮滚动来向上/向下滚动 window，就像该元素不可滚动时那样。

考虑的解决方案

我尝试使用 wheel 事件并在垂直滚动时阻止默认设置，但它没有做任何事情。

我也考虑过捕获 scroll 事件的 deltaY 并使用它手动滚动 window 和 window.scrollTo()，但是，恐怕每个浏览器 / OS 滚动的实现可能不同，因此很难在所有平台上可靠地复制该行为。

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

问题

有没有办法以某种方式将该车轮事件传播给父级 (window)？

Answer 1

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

Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto. (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>

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

Propagate wheel event from a scrollable container to the window

html

javascript

css

events

scroll

问题

考虑的解决方案

问题