如何使用页面主滚动条先滚动right-col容器，到底后再滚动页面其余内容

实现思路 #

• 移除.right-col的原生滚动配置，避免出现双滚动条割裂感
• 给.hero容器设置200vh高度，匹配右侧两个100vh高卡片的总滚动距离，让主滚动条有足够的滚动行程触发卡片上滑效果
• 将左右两列都设置为sticky定位，滚动.hero区域时两列始终固定在视口内
• 监听页面主滚动事件，将页面在.hero区域内的滚动偏移量同步到.right-col的滚动高度上，卡片上滑效果和原内部滚动效果完全一致
• 当.right-col滚动到底部后，页面主滚动条自动接管后续内容的滚动

代码修改 #

CSS调整 #

body{
    overflow: auto;
    background-color: black;
    margin: 0; /* 清除默认边距避免滚动偏移计算错误 */
}
.hero {
    display: flex;
    flex-direction: row;
    height: 200vh; /* 匹配右侧总滚动行程 */
    position: relative;
}

.left-col{
    width: 40vw;
    background-color: black;
    height: 100vh;
    position: sticky; /* 左侧固定在视口 */
    top: 0;
}
.right-col{
    min-width: 60vw;
    background-color: blue;
    height: 100vh;
    overflow: auto;
    position: sticky; /* 右侧固定在视口 */
    top: 0;
    scrollbar-width: none; /* 可选，隐藏右侧内部滚动条 */
}
/* 可选，Chrome系浏览器隐藏内部滚动条 */
.right-col::-webkit-scrollbar {
    display: none;
}
.top{
    height: 100vh;
    background-color: chartreuse;
    position: sticky;
    top: 0;
}
.bottom{
    height: 100vh;
    background-color: orange;
    position: sticky;
    top: 10%;
}

.projects{
    height: 100vh;
    background-color: crimson;
    position: sticky;
    top: 0;
}

JS实现代码 #

将以下代码放入页面空的<script>标签中即可：

$(function() {
  const $rightCol = $('.right-col');
  const $hero = $('.hero');
  // 获取hero容器距离页面顶部的偏移量
  const heroOffsetTop = $hero.offset().top;
  // 计算right-col可滚动的最大高度
  const maxRightScroll = $rightCol[0].scrollHeight - $rightCol[0].clientHeight;

  // 监听页面滚动事件
  $(window).on('scroll', function() {
    const pageScrollTop = $(this).scrollTop();
    // 计算当前页面滚动在hero区域内的有效滚动距离
    const validScroll = pageScrollTop - heroOffsetTop;

    if (validScroll >= 0 && validScroll <= maxRightScroll) {
      // 同步页面滚动量到右侧容器
      $rightCol.scrollTop(validScroll);
    } else if (validScroll > maxRightScroll) {
      // 右侧容器滚到底后固定滚动位置，避免回弹
      $rightCol.scrollTop(maxRightScroll);
    }
  })
})

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