如何实现类似Facebook主页的滚动：左侧面板触底停止，右侧可继续滚动

要实现你需要的效果——初始左右面板同步滚动，左侧内容滚动到底后固定不动，右侧继续滚动——核心是通过监听页面滚动事件，动态切换左侧内容的定位方式，同时调整右侧布局避免错位。下面是具体实现步骤：

完善HTML结构 #

给左右面板添加容器类，方便后续操作，同时填充足够测试内容：

<div class="container">
  <div class="row">
    <div class="col-md-6 left-panel">
      <div class="left-content">
        <h3>左侧面板</h3>
        <!-- 重复添加足够多的p标签，让内容高度超过视口 -->
        <p>测试内容行</p>
        <p>测试内容行</p>
        <p>测试内容行</p>
        <p>测试内容行</p>
        <p>测试内容行</p>
        <!-- 继续添加直到内容高度超过屏幕 -->
      </div>
    </div>

    <div class="col-md-6 right-panel">
      <h3>右侧面板</h3>
      <!-- 添加比左侧更多的内容，确保高度远大于左侧 -->
      <p>测试内容行</p>
      <p>测试内容行</p>
      <!-- 重复添加大量内容 -->
    </div>
  </div>
</div>

添加自定义CSS #

设置基础样式，处理固定定位和响应式适配：

/* 确保初始状态下左侧面板至少占满视口高度 */
.left-panel {
  min-height: 100vh;
}

/* 左侧内容固定时的样式 */
.left-content.fixed {
  position: fixed;
  bottom: 0;
  overflow: hidden; /* 防止内容溢出，此时左侧已滚动到底 */
}

/* 移动端（md以下）取消固定，恢复堆叠布局 */
@media (max-width: 767.98px) {
  .left-content.fixed {
    position: static;
  }
}

编写JavaScript逻辑 #

监听滚动和窗口 resize 事件，动态控制左侧内容的定位：

// 获取目标元素
const leftPanel = document.querySelector('.left-panel');
const leftContent = document.querySelector('.left-content');
const rightPanel = document.querySelector('.right-panel');

// 绑定滚动事件
window.addEventListener('scroll', handleScroll);
// 绑定窗口 resize 事件，适配屏幕变化
window.addEventListener('resize', () => {
  if (leftContent.classList.contains('fixed')) {
    updateFixedPosition();
  }
});

// 滚动处理函数
function handleScroll() {
  // 计算左侧内容的底部位置
  const leftContentBottom = leftContent.offsetTop + leftContent.scrollHeight;
  // 计算当前视口的底部位置
  const viewportBottom = window.scrollY + window.innerHeight;

  if (viewportBottom >= leftContentBottom) {
    // 左侧已滚动到底，添加固定类
    leftContent.classList.add('fixed');
    updateFixedPosition();
    // 给右侧面板设置margin，避免内容跑到固定的左侧下面
    rightPanel.style.marginTop = `${leftContent.offsetHeight}px`;
  } else {
    // 恢复正常滚动状态
    leftContent.classList.remove('fixed');
    rightPanel.style.marginTop = '';
  }
}

// 更新固定元素的位置和宽度，确保和原布局一致
function updateFixedPosition() {
  const panelRect = leftPanel.getBoundingClientRect();
  leftContent.style.left = `${panelRect.left}px`;
  leftContent.style.width = `${panelRect.width}px`;
}

// 页面加载时执行一次，处理初始状态
handleScroll();

关键逻辑说明 #

1. 滚动判断：通过对比左侧内容底部和视口底部的位置，确定是否触发固定。
2. 动态定位：固定左侧内容时，获取原面板的位置和宽度，确保固定后布局和原位置一致。
3. 响应式适配：移动端自动取消固定，恢复Bootstrap默认的堆叠布局。
4. 布局修正：固定左侧后给右侧面板设置margin，避免内容重叠。

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