Question

我与我正在开发的其中一个网站有轻微问题。我决定在网站上几乎没有全宽的部分。移动设备上的一切都很棒，但我无法移动移动设备上的水平滚动，这实际上毁了网站我尝试了几种不同的方法，例如：
添加视口

<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;
}

然而，当我向元素添加额外的最大宽度：100％时，内部的所有子项目都会摇摆不定并被挤压在一个小区域内。

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

我的身体分配了以下属性

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

Answer 1

将此问题作为问题的原因（无论你是否可以使用＆＃34;修复＆＃34;或寻求替代方案......）

我已经减少了（通过开发工具删除了所有内容），直到我离开了最终的。hero-footer div - 水平卷轴仍然存在。

删除边距/宽度设置（对值tbh似乎有点疯狂）会删除水平滚动。

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

周围有足够的类可以覆盖该块的值。

Answer 2

删除

解决了这个问题

/* margin: 0 -9999rem; */
/* padding: 0.01rem 9999rem; */

而是添加

margin:0 -6% 0 -6%;

主包装类的宽度为90％，因此删除初始边距可以解决问题。

感谢您的回答Karl，感谢您的帮助。

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

2 个答案: