固定头部遮挡滚动栏顶部，移动端适配矛盾问题求助

这个问题我之前踩过坑，确实是个棘手的兼容性矛盾！核心原因在于：

• 桌面端设置html, body { overflow: auto; }会把滚动容器从浏览器视口切换为html/body元素，导致fixed定位的头部直接覆盖在滚动条的顶部区域；
• 但移动端（除Firefox外）如果去掉这个设置，部分浏览器的滚动优化（比如弹性滚动、视口重绘机制）会让fixed定位失效，头部无法固定在视口顶部。

下面给你几个经过验证的可行解决方案：

方案一：分离独立滚动容器（最推荐） #

不要把html/body作为滚动载体，而是把页面内容放到单独的容器中，彻底隔离滚动逻辑和fixed头部：

• 设置html和body为overflow: hidden; height: 100%;，禁用原生视口滚动；
• 给内容容器设置height: calc(100vh - 头部高度); overflow: auto;，让它成为唯一的滚动容器；
• 给内容容器添加margin-top: 头部高度;，避免内容被fixed头部遮挡。

示例代码：

html, body {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff;
  z-index: 999;
}
.content-wrapper {
  height: calc(100vh - 60px);
  overflow: auto;
  margin-top: 60px;
  padding: 16px;
}

这种方法从根源上解决了滚动栏遮挡问题，同时移动端的fixed定位完全不受影响，兼容性拉满。

方案二：媒体查询差异化处理 #

针对桌面端和移动端分别设置CSS规则，兼顾两种场景：

• 桌面端保留html, body { overflow: auto; }，但给body添加padding-top: 头部高度;，同时通过webkit滚动条伪元素调整滚动条位置，避免被头部遮挡；
• 移动端去掉html/body的overflow设置，确保fixed定位正常工作，同时给内容添加padding-top避开头部。

示例代码：

/* 桌面端适配（屏幕宽度≥768px） */
@media (min-width: 768px) {
  html, body {
    overflow: auto;
    padding-top: 60px;
    margin: 0;
  }
  .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #ffffff;
    z-index: 999;
  }
  /* 调整webkit内核浏览器的滚动条位置 */
  body::-webkit-scrollbar {
    margin-top: 60px;
  }
}

/* 移动端适配（屏幕宽度<768px） */
@media (max-width: 767px) {
  html, body {
    overflow: visible; /* 恢复默认值，避免fixed失效 */
    margin: 0;
  }
  .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #ffffff;
    z-index: 999;
  }
  .content {
    padding-top: 60px;
  }
}

方案三：用Sticky定位替代Fixed（业务场景允许时） #

如果你的业务不需要头部始终固定在视口顶部（比如页面未滚动时正常占位，滚动后固定），可以用position: sticky替代fixed，这种方式不需要修改html/body的overflow属性，天然避免滚动栏遮挡问题，兼容性也很好：

示例代码：

.sticky-header {
  position: sticky;
  top: 0;
  height: 60px;
  background: #ffffff;
  z-index: 999;
}

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