在固定位置元素上滚动不会滚动容器

Question

我有一个问题，就是在具有overflow:scroll属性的容器中，无法滚动到固定位置元素的顶部。

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

考虑以下示例：jsfiddle。

如果您在容器内滚动，页面会滚动。但是，如果您在固定元素（右侧内容固定）上滚动，则容器不会滚动。

有什么想法吗？

编辑

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

编辑编辑

我找到了一个解决方案。通过使用jQuery mousewheel并根据.right类的鼠标滚轮函数给容器一个滚动，它可以正常工作。请参见更新的jsfiddle，其中包含了jQuery mousewheel。

- Rafael code

Answer 1

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

当鼠标指针位于fixed元素上方时，它试图滚动最外层的文档，但该文档高度不足以需要滚动。

如果将CodePen的输出部分调整为比当前内容的高度更短，然后尝试在fixed元素上方滚动，您将看到我所说的情况。

- J. Titus

Answer 2

这是预期的行为 - 但您可以通过将z-index: -1添加到right后面的container中，以在堆叠顺序中进行修复。但是您将无法单击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>

- kukkuz

---

是的，那就是问题所在。右侧的内容是一个按钮，用于返回上一页，因此需要可点击。因此，z-index: -1; 是行不通的。 - Rafael code

是的，没错...但我想这里没有其他选项了...如果你找到了，请在这里告诉我们。谢谢！ :) - kukkuz

那是一个不错的东西 :) - kukkuz