问题现象与成因
现象描述
在构建含有CSS fixed 定位的覆盖层（如模态遮罩、全屏导航或浮动广告）时，很多页面会出现滚动条被遮挡的现象。这种遮挡直接影响用户的滚动体验与页面可用性，尤其在需要持续浏览内容时更为明显。当滚动条无法直观操作，页面互动就会变得缓慢甚至卡顿。
此外，某些实现中固定层占据了整屏区域，导致滚动条区域成为不可点击的区域。用户需要先关闭固定层才能恢复滚动，体验显著下降，这与现代网页的无缝滚动体验相悖。因此，解决滚动条遮挡是提升页面体验的关键一步。
成因分析
造成遮挡的核心原因之一，是固定覆盖层的宽度错误地使用了width: 100vw。100vw 包含了浏览器滚动条的宽度，从而使覆盖层延伸到滚动条之上，直接遮挡了滚动条。这是横向溢出和布局错位的典型源头。
另外一个成因是定位与边界设置不当。若固定层缺少明确的left/right约束，或其z-index设置不合理，就有可能把滚动条“挤到下层”或与其他元素错位，造成明显的遮挡感受。保持固定层对滚动区域的非干扰性是关键。
快速修复方案
方案一：避免使用 100vw，改用 left/right 0
第一步要点是避免把固定覆盖层的宽度设为100vw，因为它会把滚动条宽度也算进去，导致遮挡。应改用left: 0; right: 0; width: auto，或直接设定width: 100%，以确保覆盖层覆盖的是可视区域。这样可以避免横向溢出带来的滚动条遮挡。
在实现时，给覆盖层设置top: 0; left: 0; right: 0; height: 100%，并确保容器采用box-sizing: border-box，以避免边框和内边距引入额外宽度。代码风格简洁且稳定，更利于跨浏览器兼容。
/* 方案一：避免使用 100vw，改用 left/right 0，保障滚动条可见 */
.overlay {position: fixed;top: 0;left: 0;right: 0;height: 100%;width: auto; /* 或省略，默认自适应 */z-index: 1000;
}
方案二：将固定层改为 sticky，降低遮挡概率
如果固定覆盖层的作用只是实现顶部导航等场景，可以考虑将fixed替换为sticky。sticky 能在滚动时保持可见，但不会像固定层那样覆盖整个视口。这能显著降低滚动条被遮挡的概率，提升滚动的连续性。
实现要点是把导航元素放在文档流中，利用top: 0、合适的背景和高度来实现静态粘性效果。注意兼容性：大部分现代浏览器都支持 sticky，但旧版本浏览器的行为略有差异。
/* 方案二：navbar 使用 sticky 而非 fixed */
.navbar {position: sticky;top: 0;z-index: 100;background: #fff;
}
方案三：强制滚动条留出空间与滚动行为的控制
若需要在打开遮罩层时维持滚动条的可见性，可以借助浏览器对滚动条的控制来保持稳定性。使用scrollbar-gutter 属性可以让滚动条区域保持固定宽度，从而避免因遮罩层切换造成的页面跳动。这在复杂交互的页面中尤为有用。
结合 scrollbar-gutter: stable，可以确保滚动条宽度在滚动条出现/隐藏时保持稳定，提升视觉与操作的一致性。不过请留意浏览器对该特性的支持情况。
/* 方案三：滚动条保留宽度，防止跳动 */
html {scrollbar-gutter: stable both-edges;
}
进阶优化与兼容性
跨浏览器兼容要点
不同浏览器对 fixed/100vw 的处理存在差异。Chrome/Edge 对 100vw 的影响较明显，Firefox 在某些场景也有偏差。优先采用left/right 0 的固定覆盖层设计，以提高跨浏览器的一致性。在实际项目中应做充分的跨浏览器测试。
移动端的处理也要小心，某些手势操作（如下拉刷新、触摸滚动）可能因遮罩层而被抑制。确保覆盖层对触控行为的影响最小化，并在必要时为无障碍设备提供可跳过的进入路径。
无障碍与性能考虑
无障碍方面，强覆盖层可能阻断焦点导航。应为模态或覆盖场景添加aria-modal、aria-hidden等无障碍属性，确保屏幕阅读器用户能理解当前页面状态。保持简单的 DOM 结构有利于无障碍实现。
性能方面，尽量避免复杂的重排重绘。通过使用简化的层叠上下文、降低阴影和渐变复杂度，可以提升滚动的流畅性与响应速度。避免使用高成本的动画效果在覆盖层上直接触发频繁重绘。
实用代码片段与完整示例
CSS 修复示例
下方示例整合了前述方案，展示一个简单的固定遮罩层和粘性导航的组合，确保滚动条不被遮挡且交互流畅。请按实际项目替换颜色、尺寸和层级。
/* 完整示例：固定遮罩层 + 顶部导航，不遮挡滚动条 */
:root {--overlay: rgba(0,0,0,.5);
}
html, body { margin: 0; padding: 0; height: 100%; }
.header {position: sticky;top: 0;height: 56px;background: #fff;z-index: 100;display: flex; align-items: center; padding: 0 16px;
}
.overlay {position: fixed;top: 0;left: 0;right: 0;height: 100%;background: var(--overlay);z-index: 200;
}
.main {height: 2000px;padding-top: 60px;
}
HTML 结构示例
对应的 HTML 结构应尽量简单清晰，覆盖层应在文档流之外，滚动内容放在主容器中。通过清晰的结构，可以减少定位冲突。
Fixed Overlay Avoid Scrollbar Block
固定导航
