当溢出设置为隐藏

Question

我有一个页面，其中的表单分为两部分。一次只能显示一个部分，第二部分在用户完成第一部分并点击下一部分后进行动画制作（使用jQuery）。

我在HTML中设置的方式如下：

<div class="form-container">
    <form>
        <div class="sections-container">
            <div class="section">...</div>
            <div class="section">...</div>
        </div>
    </form>
</div>

CSS的内容如下：

form {
    overflow: hidden;
}
.sections-container {
    width: 200%;
}
.sections-container::after {
    clear: both;
    content: '';
    display: block;
}
.section {
    float: left;
    width: 50%
}

当用户点击“下一步”时，使用jQuery，.sections-container会在第二个表单部分中对水平幻灯片应用负margin-left。

问题出在Chrome中，当启用了移动设备视图打开开发工具时，我仍然可以水平滚动页面，但看不到滚动条。当overflow设置为隐藏时，为什么会发生这种情况？如何修复此问题以使页面无法滚动？

Answer 1

尝试删除表单CSS样式上的类句点。应该是这样的。

form {
    overflow: hidden;
}