jquery - 在位置固定元素的顶部滚动不会滚动容器

Question

我有一个问题，无法在带有 overflow:scroll 的容器内的固定位置元素之上滚动。

.container {overflow: scroll; height: 200px;}
.right {position: fixed;}
.left {height: 2000px;}

考虑这个例子:jsfiddle .

如果您在容器内的任何地方滚动，页面就会滚动。但是，如果您在固定元素的顶部滚动光标(内容右侧固定)，则容器不会滚动。

有什么想法吗？

编辑

我还需要能够单击固定的内容，因为它是一个返回上一页的按钮。因此，z-index: -1; 不会起作用。

编辑编辑

我找到了一个解决方案。通过使用 jQuery mousewheel并根据 .right 类的鼠标滚轮功能为容器提供滚动，它工作得很好。查看更新 jsfiddle ，jQuery鼠标滚轮直接包含在js中。

Answer 1

设置为 position: fixed 或 position: absolute 的元素不再被视为在其父容器内。

当鼠标光标位于 fixed 元素上方时，它试图在最外面的文档上滚动，该文档不够高，无法滚动。

如果您将 CodePen 的输出部分的大小调整为比当前内容的高度短，然后尝试在 fixed 元素顶部滚动，您会看到我'我在谈论。