css - 内部带有固定元素的滚动容器不能在固定元素上滚动

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
`;