如何修复使用position: sticky（bottom:0）时滚动条持续抖动问题

问题背景 #

在滚动容器中使用position: sticky实现粘性页脚后，滚动条出现不稳定的抖动现象，移除粘性页脚后问题消失，且该代码此前正常运行，近期浏览器更新后才出现异常。代码示例：

<div style="overflow: auto; height: 400px">
  <header></header>
  <div>list-content</div>
  <footer style="position: sticky; bottom: 0">Sticky Footer</footer>
</div>

问题原因 #

近期Chrome、Edge等基于Chromium的浏览器更新了position: sticky的布局计算逻辑：当粘性页脚从正常文档流切换到固定状态时，滚动容器的可滚动内容高度会发生变化，导致容器内部宽度（扣除滚动条后的宽度）出现微小波动，触发浏览器频繁重排，最终表现为滚动条抖动。

可行解决方案 #

1. 固定滚动条宽度并预留占位 #

通过强制设置滚动条宽度，给滚动容器添加对应宽度的内边距，避免容器内部宽度因内容高度变化而波动：

/* 针对目标滚动容器设置滚动条样式 */
.scroll-container::-webkit-scrollbar {
  width: 16px; /* 固定滚动条宽度 */
  background-color: #f5f5f5;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

/* 兼容Firefox */
.scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
  padding-right: 16px; /* 预留滚动条宽度的占位，避免内容被遮挡 */
}

对应的HTML结构：

<div class="scroll-container" style="overflow: auto; height: 400px">
  <header></header>
  <div>list-content</div>
  <footer style="position: sticky; bottom: 0">Sticky Footer</footer>
</div>

2. 将Footer移出滚动容器，用绝对定位模拟粘性效果 #

把粘性页脚放在滚动容器外部，通过父容器相对定位+页脚绝对定位的方式实现固定效果，彻底避免滚动容器内容高度变化的问题：

<div style="position: relative; height: 400px; border: 1px solid #eee;">
  <!-- 滚动容器，预留Footer高度的内边距，防止底部内容被遮挡 -->
  <div style="overflow: auto; height: 100%; padding-bottom: 48px;">
    <header>Header</header>
    <div style="height: 1000px;">list-content</div>
  </div>
  <!-- 绝对定位的Footer，宽度与父容器一致 -->
  <footer style="position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: #f5f5f5;">Sticky Footer</footer>
</div>

3. 给Sticky元素添加布局隔离属性 #

利用CSS的contain属性限制浏览器重排的范围，减少抖动触发频率：

.sticky-footer {
  position: sticky;
  bottom: 0;
  contain: layout paint; /* 隔离布局和绘制范围，降低重排开销 */
}

4. 给Sticky Footer设置固定高度 #

如果页脚高度不动态变化，明确设置固定高度可以让浏览器更稳定地计算容器内容高度，避免因高度不确定导致的布局波动：

<footer style="position: sticky; bottom: 0; height: 48px; line-height: 48px; padding: 0 12px;">Sticky Footer</footer>

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