Chrome移动端：禁止body滚动时Sticky/Fixed Header上移1px问题

我之前也碰到过这个Chrome移动端的诡异bug，简直让人摸不着头脑！当用position: sticky做粘性页眉，或者用position: fixed固定元素时，只要页面没滚动到底部，给body加上overflow: hidden禁止滚动，元素就会莫名上移1像素，视觉上特别别扭。

问题原因 #

这个情况本质上是Chrome移动端在处理body滚动状态切换时的布局计算偏差——当body从可滚动变为不可滚动时，浏览器会隐藏原本的浮动滚动条，这个过程中视口高度的计算出现了微小误差，导致fixed/sticky元素的定位偏移了1px。

解决方案 #

分享几个亲测有效的解决方法，按优雅程度排序：

方法1：用固定body的方式替代单纯的overflow:hidden

不要直接给body加overflow: hidden，而是结合position: fixed和top属性来固定页面位置，这样既能禁止滚动，又能避免布局偏移：

// 禁止滚动的函数
function lockScroll() {
  // 记录当前滚动位置
  const scrollPosition = window.scrollY;
  // 固定body，防止滚动
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollPosition}px`;
  document.body.style.width = '100%';
}

// 恢复滚动的函数
function unlockScroll() {
  // 获取之前记录的滚动位置
  const scrollPosition = -parseInt(document.body.style.top);
  // 恢复body的默认样式
  document.body.style.position = '';
  document.body.style.top = '';
  // 滚动回之前的位置
  window.scrollTo(0, scrollPosition);
}

这种方法从根源上避免了滚动条切换带来的布局变化，是最稳定的方案。

方法2：临时修正元素偏移（hack方案）

如果不想修改滚动锁定的逻辑，可以在给body设置overflow: hidden的同时，给sticky/fixed元素添加一个临时的位移修正：

/* 当body有no-scroll类时，修正元素位置 */
body.no-scroll .sticky-header {
  transform: translateY(1px);
}

然后在JS里切换no-scroll类的时候同步应用这个样式，不过这属于针对性的hack，只适合临时应急。

方法3：用容器包裹内容，控制容器的overflow

把页面内容放在一个单独的容器里，比如<div class="page-content">，然后禁止滚动时给这个容器加overflow: hidden，而不是给body加。这样body的滚动状态不变，就不会触发这个偏移bug：

<body>
  <header class="sticky-header">粘性页眉</header>
  <div class="page-content">
    <!-- 页面所有内容 -->
  </div>
</body>

function lockScroll() {
  document.querySelector('.page-content').style.overflow = 'hidden';
}

function unlockScroll() {
  document.querySelector('.page-content').style.overflow = '';
}

这个方法适合页面结构比较清晰的场景，不用修改body的样式。

总结 #

优先推荐方法1，它能彻底解决这个问题，而且不会带来其他副作用。如果项目结构限制，方法3也是不错的选择，方法2只适合临时快速修复。

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