Question

我有一个问题是无法在具有溢出的容器内滚动固定元素的位置：滚动。

.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元素的顶部滚动，您将看到我的内容＆＃39我正在谈论。

Answer 2

此是预期行为 - 但您可以修复这会推动堆叠顺序中right后面的container 向其添加z-index: -1。但是，您无法点击right中的链接。

请参阅下面的演示：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

位置固定元素需要添加

pointer-events: none

在 chrome 和 mozilla 上测试

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

3 个答案: