CSS布局引发页面横向滚动问题 WordPress主题滚动故障修复求助

问题成因 #

• 固定宽度属性溢出：站点内多个全屏模块设置了固定的左右外边距/内边距，响应式断点下没有同步缩放数值，总宽度超出100%视口宽度
• 动画元素偏移溢出：部分入场动画、悬浮动效的元素初始X轴偏移值大于100%，对应父容器未设置横向溢出隐藏，导致元素撑开页面宽度
• 网格布局间隙溢出：首页内容展示网格的固定间距值，在小屏设备下未适配，总宽度计算超出父容器宽度

修复方案 #

将以下代码添加到WordPress后台「外观-自定义-额外CSS」输入框中，保存后刷新页面即可生效：

/* 根节点全局禁止横向溢出 */
html, body {
  overflow-x: hidden;
  width: 100%;
}
/* 兼容主流页面构建器的容器溢出处理 */
.wp-site-blocks, .elementor-section, .wp-block-group {
  overflow-x: hidden;
  max-width: 100vw;
}
/* 小屏设备适配列容器边距 */
@media (max-width: 768px) {
  .wp-block-columns, .wp-block-post-template {
    margin: 0 !important;
    padding: 0 15px !important;
  }
}

额外排查技巧：如果添加上述代码后仍存在横向滚动条，可打开浏览器F12开发者工具，使用元素选择器拖动到页面溢出的边缘位置，即可快速定位到具体的溢出元素，给该元素的直接父容器添加overflow-x: hidden属性即可解决。

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