CSS Sticky 粘性布局失效：水平滚动后粘性效果消失怎么办？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS Sticky 粘性布局失效：水平滚动后粘性效果消失怎么办？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

关于 css sticky 粘性布局的问题

你遇到了一个关于 css sticky 定位的难题，你的代码可以将左侧列锁定为粘性，但在水平滚动超过 300px 时粘性效果就会消失。

原因

sticky 元素会“粘”到其最近的具有“滚动机制”的祖先元素。在你提供的代码中，table-body 被设置了 overflow: auto;，使得水平滚动条生效。但是，table-body 的宽度是固定的（300px），因此当水平滚动超过该宽度时，sticky 元素就会脱离其祖先元素，导致粘性效果失效。

解决方案

要解决此问题，可以将 table-body 的宽度设置为非固定，使其能够与水平滚动条一起扩展。可以将以下 css 添加到你的代码中：

.table-body {
    display: flex;
}

通过将 table-body 设置为 display: flex;，它将成为一个灵活的容器，可以随着水平滚动条的扩展而扩展。现在，sticky 元素将能够在整个可滚动区域内保持粘性。

好了，本文到此结束，带大家了解了《CSS Sticky 粘性布局失效：水平滚动后粘性效果消失怎么办？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！