求助实现类似Twitter的Div滚动效果：右侧Div停滚后中间Div续滚

实现思路 #

要实现右侧容器滚动到底后固定，左侧容器继续滚动的效果，核心是利用position: sticky特性，但需要调整布局结构与属性控制滚动阶段行为：

1. 放弃flex布局（flex子元素的sticky行为存在约束），改用Grid布局实现两列独立控制；
2. 结合CSS或JavaScript，实现右侧容器「先跟随滚动，到达底部后固定」的逻辑。

纯CSS近似方案（适合简单场景） #

该方案可实现右侧容器滚到底后停在视口底部，左侧容器继续滚动：

/* 父容器用Grid分配两列宽度 */
.parent {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 可按需调整比例，比如2fr 1fr */
  gap: 16px; /* 可选列间距 */
  min-height: 100vh;
}

/* 左侧长内容容器 */
.child1 {
  background: tomato;
  border: 10px solid green;
  height: 5000vh;
}

/* 右侧短内容容器 */
.child2 {
  background: skyblue;
  border: 10px solid pink;
  height: 500vh;
  position: sticky;
  /* 初始顶部对齐，容器底部到达视口后固定在底部 */
  top: 100vh;
  margin-top: -100vh;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

原理：通过top:100vh与负margin让容器初始顶部对齐，当页面滚动至容器底部触达视口底部时，sticky触发固定逻辑，容器停在视口底部。

JS增强方案（精准还原Twitter效果） #

如果需要更精准的控制（右侧容器先跟随滚动，完全显示后固定在底部），可通过JavaScript监听滚动事件实现：

.parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.child1 {
  background: tomato;
  border: 10px solid green;
  height: 5000vh;
}

.child2 {
  background: skyblue;
  border: 10px solid pink;
  height: 500vh;
  position: sticky;
  top: 0;
  transition: top 0.1s;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2" id="stickySidebar"></div>
</div>

<script>
const sidebar = document.getElementById('stickySidebar');
const sidebarHeight = sidebar.offsetHeight;

window.addEventListener('scroll', () => {
  // 计算视口底部与右侧容器底部的位置关系
  const viewportBottom = window.scrollY + window.innerHeight;
  const sidebarBottom = sidebar.offsetTop + sidebarHeight;
  
  // 视口底部超过容器底部时，固定在视口底部；否则跟随滚动
  if (viewportBottom >= sidebarBottom) {
    sidebar.style.top = `calc(100vh - ${sidebarHeight}px)`;
  } else {
    sidebar.style.top = '0';
  }
});
</script>

原理：监听页面滚动，动态判断位置关系，修改右侧容器的top值，实现「跟随滚动→到达底部后固定」的完整逻辑。

你的初始代码问题说明 #

你使用flex布局并给右侧容器设置position: sticky; top:0，这会让它一直固定在视口顶部，而非滚到底后停止。flex容器的align-items:flex-start虽保证子元素高度独立，但sticky在flex容器中的参考系是视口，无法自动识别容器底部位置，因此无法实现目标逻辑。

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