如何用纯CSS实现双栏布局的指定同步滚动效果？

可以用纯CSS实现你需要的同步滚动行为，核心思路是让两栏高度一致，通过伪元素补足短栏的高度，再结合sticky定位实现短栏内容到边界后固定、长栏继续滚动的效果。

调整后的代码 #

CSS

.container {
  display: flex;
  justify-content: space-around;
  align-items: stretch; /* 强制两栏高度一致 */
  border: 2px dashed rgba(114, 186, 94, 0.35);
  background: rgba(114, 186, 94, 0.05);
}

.col {
  position: relative;
}

.col-content {
  position: sticky;
  top: 0; /* 初始滚动时跟随视口顶部 */
}

/* 给短栏添加伪元素，补足高度与长栏一致 */
.col1::after {
  content: '';
  display: block;
  height: 100%;
}

.col div {
  height: 250px;
  width: 250px;
  border: 2px dashed rgba(255, 186, 94, 0.35);
  margin-bottom: 20px;
}

.col div:nth-child(2n) {
  opacity: 0.5;
}

.col1 div {
  background-color: red;
}

.col2 div {
  background-color: blue;
}

HTML

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="container">
    <div class="col col1">
      <div class="col-content">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="col col2">
      <div class="col-content">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</body>
</html>

原理说明 #

1. 强制两栏等高：通过align-items: stretch让flex容器内的两栏高度自动匹配最长栏的高度，再给短栏添加::after伪元素填充剩余高度，确保两栏的滚动基准一致。
2. Sticky定位同步触发：将两栏的内容包裹在col-content容器中，并设置position: sticky; top: 0，初始滚动时两个容器会同步跟随视口顶部移动。
3. 短栏固定逻辑：当短栏的内容滚动到自身底部时，由于短栏的整体高度已被伪元素补足到与长栏一致，col-content会触发sticky的固定状态，不再跟随滚动；而长栏的内容更长，会继续滚动直到自身内容结束。

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