如何解决页面滚动时网站Header向左偏移的问题？

核心原因 #

滚动条出现后会占据页面右侧的横向空间，导致页面可用宽度缩小，若Header（此处为react-bootstrap的Navbar）依赖页面内容宽度计算布局，就会出现向左偏移的错位问题。以下是几种实用修复方案：

方案1：使用CSS scrollbar-gutter 属性（推荐） #

这是现代浏览器支持的原生解决方案，会提前预留出滚动条的宽度，无论滚动条是否显示，页面布局宽度都保持一致，从根源避免偏移。

body {
  scrollbar-gutter: stable;
}
/* 若Navbar是fixed定位，也可直接给Navbar添加该属性 */
.navbar {
  scrollbar-gutter: stable;
}

方案2：强制始终显示滚动条 #

让页面无论内容多少都显示垂直滚动条，这样页面宽度不会随内容变化而改变，Header布局自然不会错位。

body {
  overflow-y: scroll;
}

方案3：调整Navbar的宽度适配逻辑 #

如果使用了react-bootstrap的fixed="top"/fixed="bottom"属性，确保Navbar使用container-fluid类实现自适应宽度，避免手动设置width: 100%这类可能引发偏移的硬编码样式：

<Navbar fixed="top" expand="lg" className="bg-body-tertiary">
  <Container fluid> {/* 用container-fluid替代普通container */}
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    {/* 其他Navbar子元素 */}
  </Container>
</Navbar>

同时检查是否存在自定义的margin-left/padding-left等样式导致错位，移除不必要的固定数值设置。

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