带有固定元素的滚动容器在固定元素上不可滚动

Question

我有一个固定高度和溢出滚动的容器。 在里面我有一个溢出容器的标题和内容。

当我的鼠标位于内容上时，容器会滚动。但是当我在 Header 上时，不会触发容器的滚动事件。

如何在容器上的任何地方触发滚动事件，甚至在标题上？

我创建了一个示例来查看行为：

https://codesandbox.io/s/k0x2oxw8x3

我正在使用带有样式组件的 React，所以我不能使用 Jquery。

Answer 1

只需使用指针事件：无

const Header = styled.div`
  position: fixed;
  background-color: green;
  width: 100%;
  height: 100px;
  pointer-events: none; // add this
`;