在 position 固定元素顶部滚动不滚动容器

Question

我有一个问题，无法在带有溢出的容器内的 position 固定元素上滚动：滚动。

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

考虑这个例子： jsfiddle 。

如果滚动容器内的任何位置，页面就会滚动。 但是，如果使用 cursor 在固定元素顶部滚动（内容右固定），则容器不会滚动。

有任何想法吗？

编辑

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

编辑编辑

我找到了解决方案。 通过使用jQuery 鼠标滚轮并基于右侧 class 的鼠标滚轮 function 为容器滚动，它工作得很好。 请参阅更新的jsfiddle ，jQuery 鼠标滚轮直接包含在 js 中。

Answer 1

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

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

如果您将 CodePen 的输出部分的大小调整为短于您当前在那里的内容的高度，然后尝试在fixed元素的顶部滚动，您将看到我在说什么。

Answer 2

这是预期的行为 - 但您可以通过向其添加z-index: -1来解决此问题，将其按堆叠顺序推到container的right 。 但是您将无法点击right的链接。

请参阅下面的演示：

 .container { overflow: scroll; float: left; width: 100%; height: 200px; } .left, .right { float: left; } .left { width: 60%; height: 2000px; border: 3px solid blue; } .right { width: 40%; position: fixed; border: 3px solid red; left: 60%; z-index: -1; }

 <div class="container"> <div class="left"> content left </div> <a href="#" class="right"> content right fixed </a> </div>

Answer 3

对于位置固定元素需要添加

pointer-events: none

在 chrome 和 mozilla 上测试