html - 在全宽部分禁用移动水平滚动

Question

我正在开发的其中一个网站出现了一些小问题。我决定在网站上设置几个全宽部分。移动设备上的一切都很棒，但我无法删除移动设备上的水平滚动条，这基本上会破坏网站。
我尝试了几种不同的方法，例如:
添加视口(viewport)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

将 max-width 属性添加到 body 并禁用 overflow-x

body { max-width:100%; overflow-x:hidden;}

我的全宽部分代码如下所示:

.full-width-light {
    margin: 0 -9999rem;
    padding: 0.01rem 9999rem;
    overflow: hidden;
    color:$basegrey;
    background-color:$basewhite;
}

但是，当我向元素添加额外的 max-width:100% 时，内部的所有子元素都会摇晃并被挤压在一个小区域内。

然而，在桌面上，一切都运行良好，我对水平滚动没有任何问题。

我的 body 分配了以下属性

body {
max-width:100%!important;
overflow-x:hidden!important;
}
html, body {
    height: 100%;
}

Answer 1

打算将此作为问题的原因提出来(无论您是接受“修复”还是寻求替代方案...

我已经减少(通过开发工具删除了所有内容)直到我只剩下最后的 .hero-footer div - 水平滚动仍然存在。

删除 margin/width 设置(这在值 tbh 上看起来有点疯狂)会删除水平滚动。

.full-width-dark {
    /* margin: 0 -9999rem; */
    /* padding: 0.01rem 9999rem; */
    color: #F5F5F5;
    background-color: #262626;
    overflow-x: hidden;
}

围绕它有足够的类来覆盖该 block 的值。