如何用CSS Position Sticky实现下一个内容区块的滚动预览？

需求说明 #

滚动页面浏览当前内容区块时，让后续内容区块以粘性定位的方式占据视口50%区域，直到该后续区块完全进入视野（类似新闻网站浏览文章时预览下一篇的效果）。

现有HTML结构 #

当前内容区块 #

<div class="current-content">
  <p>hi 1</p>
  <p>hi 2</p>
  <p>hi 3</p>
  <p>hi 4</p>
  <p>hi 5</p>
  <p>hi 6</p>
  <p>hi 7</p>
  <p>hi 8</p>
  <p>hi 9</p>
</div>

后续内容区块 #

<div class="next-content">
  <p>hi 1</p>
  <p>hi 2</p>
  <p>hi 3</p>
  <p>hi 4</p>
  <p>hi 5</p>
  <p>hi 6</p>
  <p>hi 7</p>
  <p>hi 8</p>
  <p>hi 9</p>
</div>

尝试的CSS及问题 #

尝试通过position: sticky结合bottom属性实现，但由于next-content在HTML结构中位于当前内容之后，无法使用top属性；且bottom属性依赖元素自身高度，在高度未知时无法精准控制其占据视口50%区域。

尝试的代码：

p {
  font-size: 28px;
  margin: 20px;
}

.current-content {
  background: yellow;
}

.next-content {
  background: pink;
  position: sticky;
  bottom: -50vh;
}

可行解决方案：容器包裹法 #

通过给next-content添加一个粘性定位的容器，实现无需依赖元素高度的预览效果。

调整后的HTML #

<div class="current-content">
  <p>hi 1</p>
  <p>hi 2</p>
  <p>hi 3</p>
  <p>hi 4</p>
  <p>hi 5</p>
  <p>hi 6</p>
  <p>hi 7</p>
  <p>hi 8</p>
  <p>hi 9</p>
</div>
<!-- 添加预览容器 -->
<div class="next-preview-container">
  <div class="next-content">
    <p>hi 1</p>
    <p>hi 2</p>
    <p>hi 3</p>
    <p>hi 4</p>
    <p>hi 5</p>
    <p>hi 6</p>
    <p>hi 7</p>
    <p>hi 8</p>
    <p>hi 9</p>
  </div>
</div>

对应的CSS #

p {
  font-size: 28px;
  margin: 20px;
}

.current-content {
  background: yellow;
  min-height: 150vh; /* 确保当前内容足够长，方便测试滚动 */
}

.next-preview-container {
  position: sticky;
  top: 50vh; /* 容器顶部对齐视口中间 */
  height: 50vh; /* 容器高度为视口的50% */
  overflow: hidden; /* 隐藏超出容器的内容，实现预览效果 */
  margin-top: -50vh; /* 抵消容器高度，避免文档流布局偏移 */
}

.next-content {
  background: pink;
  position: relative;
}

效果说明 #

• 滚动浏览current-content时，next-preview-container会粘在视口下半部分，显示next-content的前半段内容；
• 当滚动到next-content本身进入文档流的位置时，容器会跟随页面滚动，不再保持粘性，此时next-content完整显示；
• 如果需要在预览时查看next-content的全部内容，可将容器的overflow: hidden改为overflow: auto，即可在预览容器内滚动查看。

内容的提问来源于stack exchange，提问作者Walrus