如何在主内容滚动至底部时让粘性侧边栏滚动到底部？

要实现你需要的效果，核心是检测页面滚动到页脚的时机，再用JavaScript控制侧边栏的滚动位置。下面是具体思路和代码实现：

1. 修正侧边栏CSS语法错误 #

你原CSS中的calc(100vh-90px)缺少运算符前后的空格，会导致样式失效，正确写法如下：

.sidebar {
  position: sticky;
  top: 90px;
  height: calc(100vh - 90px); /* 减号前后必须加空格 */
  overflow-y: scroll;
  width: 300px; /* 补充宽度方便测试 */
}

2. 用Intersection Observer检测页脚进入视口 #

相比监听滚动事件，这个API性能更优，能精准判断页脚何时出现在屏幕中：

const footer = document.querySelector('footer');
const sidebar = document.querySelector('.sidebar');

// 创建观察者实例，当页脚进入视口时触发回调
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 将侧边栏滚动条直接定位到底部
      sidebar.scrollTop = sidebar.scrollHeight - sidebar.clientHeight;
    }
    // 可选：若需页面上滚时恢复侧边栏位置，取消以下注释
    // else {
    //   sidebar.scrollTop = 0;
    // }
  });
}, { threshold: 0.1 }); // 页脚有10%进入视口即触发

// 开始监听页脚元素
observer.observe(footer);

3. 测试用完整HTML结构 #

以下是包含模拟长内容的完整结构，可直接用于测试：

<nav style="height:90px; background:#eee; position:sticky; top:0;">顶部导航</nav>
<div class="wrapper" style="display:flex; gap:20px; padding:20px;">
  <div class="main" style="flex:1;">
    <div style="height:2000px; background:#f5f5f5;">主内容区域（模拟超长内容）</div>
  </div>
  <div class="sidebar">
    <div style="height:1500px; background:#e0e0e0;">
      侧边栏动态内容<br>
      第1行<br>
      第2行<br>
      ...<br>
      最后一行（需滚动到底才能看到）
    </div>
  </div>
</div>
<footer style="height:300px; background:#333; color:#fff; padding:20px;">页脚区域</footer>

关键细节说明 #

• sidebar.scrollHeight是侧边栏内容的总高度，sidebar.clientHeight是侧边栏的可视高度，两者差值即为滚动到底部所需的scrollTop值
• 若坚持使用滚动事件监听，可参考以下节流版本代码（性能略逊于Intersection Observer）：

let timer = null;
window.addEventListener('scroll', () => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    const footerTop = footer.offsetTop;
    const scrollPos = window.scrollY + window.innerHeight;
    if (scrollPos >= footerTop) {
      sidebar.scrollTop = sidebar.scrollHeight - sidebar.clientHeight;
    }
  }, 100);
});

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