位置固定在子元素中，但同步父 x 滚动与子元素左位置

Question

我有一个 div，它相对定位并水平滚动。

在那个 div 中，我想要一个固定定位的元素，它与父 div 一起滚动但保持在顶部，因为该父 div 是垂直滚动 div 的子级。

我创建了一个代码沙盒来说明我的观点： https://codesandbox.io/s/strange-browser-mydzm

所以绿色 div 垂直滚动，因此红色和蓝色 div 可以同时滚动。 蓝色 div 也可滚动但水平滚动，因此红色 div 保持可见。

现在我希望橙色 div（它说 RightPane）与蓝色 div 一起水平滚动，但是当绿色 div 垂直滚动时，我希望橙色 div 保持固定。

将 RightPane 设置为 positon: fixed 而不设置 top 属性有助于防止垂直滚动，但也会防止水平滚动。

这是否可以仅使用 CSS 来实现？

Answer 1

我认为不可能完全按照您的意愿行事，但通过对右侧窗格和橙色标题使用 position:sticky，我能够非常接近。

通过一些额外的调整检查这是否适合您：

https://codesandbox.io/s/wonderful-ellis-dyckc

.App {
  position: relative;
  ...
}

.leftPane {
  width: 30%;
  z-index: 1;
  position: sticky;
  left: 0px;
  float: left;
  ...
}

.rightPane {
  height: 100%;
  margin-left: calc(30% + 20px);
  position: relative;
  ...
}

.fixedPane {
  position: sticky;
  ...
}