Astra Pro与WP Bakery滚动时布局容器溢出问题求助

问题场景 #

• 页面首次加载显示正常，滚动后移动端、桌面端主布局容器均出现向右溢出的情况
• 已尝试添加自定义CSS规则，联系WPBakery与Astra Pro官方支持但双方互相推诿
• WPBakery搭配WordPress默认主题使用时无此问题

排查方向与修复方案 #

1. 先定位CSS层面的溢出根源 #

• 打开浏览器开发者工具（F12），滚动页面至溢出状态，检查<body>或主容器（.site-container类）的overflow-x属性，确认是否被动态修改为visible
• 用工具选中页面右侧溢出区域，定位是哪个元素（通常是WPBakery模块、浮动元素或动态生成内容）宽度超出了父容器
• 临时添加全局CSS测试是否能快速抑制溢出：

html, body {
    overflow-x: hidden !important;
}
.site-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

如果添加后问题消失，说明冲突来自CSS层面，大概率是Astra Pro的滚动触发了样式变更，或WPBakery模块样式与Astra布局规则冲突。

2. 排查Javascript动态修改的可能性 #

• 用开发者工具的断点功能监听样式变化：选中主容器元素，右键→Break on→Attribute modifications，滚动页面查看是否有JS代码在滚动时修改了容器的宽度、边距或overflow属性
• 禁用Astra Pro的附加功能（如固定头部、滚动动画等），逐一排查是否是某功能触发的冲突
• 禁用WPBakery的第三方附加模块，仅保留核心模块，测试是否是自定义模块导致的问题

3. 针对性修复示例 #

• 如果是Astra固定头部导致的溢出：调整固定头部激活时的容器样式，兼容滚动条宽度：

.ast-sticky-header-active .site-container {
    padding-right: var(--ast-global-scrollbar-width, 0px) !important;
}

• 如果是WPBakery模块溢出：给溢出模块添加宽度限制：

.wpb_element_wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

• 清除浏览器缓存与网站缓存插件的缓存，确保自定义CSS生效

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