如何让父滚动容器忽略overflow:visible内容？解决滚动栏布局对齐问题

布局背景 #

• 页面分为header和body两部分，未采用position:fixed固定header，而是将body设为滚动容器
• 选择该布局的原因：body内存在需要固定/吸附在header底部的fixed/sticky元素，同时可解决header和body的动态尺寸适配问题

核心对齐问题 #

当body出现垂直滚动栏但header未出现时，跨header与body边界的UI元素无法对齐

临时方案及缺陷 #

• 临时解决思路：缩小body元素宽度，在末尾添加position:absolute的背景div覆盖滚动栏位置，使背景色与主UI元素一致，保证header和body视觉宽度统一
• 存在的问题：显示垂直滚动栏时，浏览器会出现横向滚动栏——尽管占位背景div不占用实际宽度，但仍触发了横向溢出
• 尝试过overflow等属性，无法实现「无滚动栏时显示占位div，有滚动栏时不产生混乱」的效果；目前没有原生CSS属性可根据滚动栏显示状态动态调整样式

兼容性限制 #

• scrollbar-gutter无法使用（需兼容Chromium 88、Firefox、iOS Safari等版本）
• overflow:overlay兼容性不足，无法覆盖目标浏览器范围
• position:relative与position:fixed的组合方案，无滚动栏时布局正常，但有滚动栏时仍会出现横向滚动栏问题

代码示例 #

当前方案可实现蓝色块全屏显示、红绿块始终对齐，但会触发横向滚动栏：

<html>
    <head></head>
    <body style="height:100vh;display:flex;flex-direction:column;margin:0">
        <div style="height:200px;flex-shrink:0; max-width:calc(100vw - 17px)">
             <div style="height:100px;background:blue; width:100%; position:relative">
                 <div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
             </div>
             <div style="height:100px;background:red;margin-left:200px; width:50%"></div>
        </div>
        <div style="flex-grow: 1; overflow: auto;">
            <div style="max-width:calc(100vw - 17px)">
                <div style="height: 100px;background:green;margin-left:200px; width:50%"></div>
                <div style="height: 100px;background:blue; width:100%; position:relative">
                    <div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
                </div>
            </div>
        </div>
    </body>
</html>

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