CSS粘性(Sticky)容器内容无法完整显示问题求助

问题 #

开发笔记网站时遇到CSS布局问题：带position: sticky属性的容器内容过多时，用户无法查看容器后半部分内容，比如第一个容器里的‘ZZZ’，必须滚动到下一个容器才能看到。尝试增加容器高度，问题依然存在。

原因 #

当前给.sticky设置了height: 300vh，结合top:0的sticky定位，容器会占据3倍视口高度，但sticky元素的特性是当页面滚动时，后续的sticky容器会将前一个容器“顶出”视口，导致前一个容器底部的内容被遮挡。同时，容器本身没有内部滚动机制，超出视口的内容无法在当前容器停留时查看。

解决方案 #

1. 将.sticky的高度限制为视口高度（height: 100vh），确保容器不会超出视口范围
2. 给.sticky添加overflow-y: auto，让容器内部内容可以独立滚动，无需依赖页面滚动就能查看全部内容

修改后的代码 #

CSS #

body {
  background-color: #808080;
  margin: 0; /* 去掉默认边距，避免容器出现滚动条间隙 */
}

.sticky {
  position: sticky;
  height: 100vh; /* 改为视口高度 */
  padding: 5px;
  background-color: #fff;
  overflow-y: auto; /* 添加内部垂直滚动 */
}

.first-div {
  top: 0;
  border: solid 2px black;
}

.second-div {
  top: 0;
  border: solid 2px red;
}

.third-div {
  top: 0;
  border: solid 2px pink;
}

.fourth-div {
  top: 0;
  border: solid 2px purple;
}

.fifth-div {
  top: 0;
  border: solid 2px green;
}

.code {
  color: blue;
  font-size: 20px;
}

.note {
  color: purple;
  font-size: 20px;
}

h1 {
  white-space: pre-line;
}

HTML #

<div class="sticky first-div">
  Container 1: First Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>ZZZ</h1>
</div>

<div class="sticky second-div">
  Container 2: Second Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
</div>

<div class="sticky third-div">
  Container 3: Third Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
</div>

<div class="sticky fourth-div">
  Container 4: fourth Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
</div>

<div class="sticky fifth-div">
  Container 5: fifth Div
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
  <h1>XXXX</h1>
</div>

效果说明 #

修改后，每个sticky容器会固定在视口顶部，容器内部内容超出视口高度时会显示滚动条，用户可以直接滚动容器内部查看全部内容；当页面滚动到下一个容器位置时，当前容器会被顶出视口，下一个容器固定到顶部，既保留了sticky的定位特性，又解决了内容无法查看的问题。

内容的提问来源于stack exchange，提问作者一萬次悲傷