Bootstrap项目中遮罩层(overlay)覆盖body滚动条样式问题求助

解决方案 #

问题原因

你当前的遮罩层使用了position: fixed+width: 100%的配置，会铺满整个浏览器视口，自然会覆盖右侧的body滚动条；同时你直接修改Bootstrap原生.col-md-3栅格类的样式，会污染全局栅格规则，导致其他页面栅格布局出现异常。

修改步骤

1. 给遮罩层新增自定义类名
   不要直接用Bootstrap原生类作为遮罩层的样式选择器，给对应div新增自定义类避免样式冲突，HTML修改示例：

<div id="col-md-3" class="col-md-3 menu-overlay">
    <!-- 原有内部内容保持不变 -->
</div>

2. 调整CSS样式
   删掉针对.col-md-3的全局样式修改，改为自定义类的专属样式，调整宽度规则留出滚动条位置：

.menu-overlay,.apply {
    display: none;
    position: fixed !important;
    /* 减去大部分浏览器默认17px的滚动条宽度，适配不同设备可以用JS动态计算 */
    width: calc(100vw - 17px);
    max-width: unset;
    height: 100vh;
    z-index: 10;
    background-color: #0000009e;
    /* 补全top属性的单位，修正无效样式 */
    top: 0;
    left: 0;
}

补充说明：你原有CSS中重复声明了两次display: none，且top:100缺少单位属于无效属性，以上代码已经做了修正。

3. 兼容不同滚动条宽度的可选方案
   如果需要适配所有浏览器不同的滚动条宽度，可以通过JS动态计算滚动条宽度后赋值：

// 计算当前浏览器滚动条宽度
const getScrollbarWidth = () => window.innerWidth - document.documentElement.clientWidth;
const scrollbarWidth = getScrollbarWidth();

// 显示遮罩层时动态设置宽度
function openMenuOverlay() {
  const overlayEl = document.querySelector('.menu-overlay');
  overlayEl.style.width = `calc(100vw - ${scrollbarWidth}px)`;
  overlayEl.style.display = 'block';
}

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