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

大佬教程收集整理的这篇文章主要介绍了位置固定在子元素中，但同步父 x 滚动与子元素左位置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决位置固定在子元素中，但同步父 x 滚动与子元素左位置？

我有一个 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 来实现？

解决方法

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

大佬总结

以上是大佬教程为你收集整理的位置固定在子元素中，但同步父 x 滚动与子元素左位置全部内容，希望文章能够帮你解决位置固定在子元素中，但同步父 x 滚动与子元素左位置所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。