Question

最近我尝试this method 在容器外增加我的div背景颜色。除了在移动浏览器上将overflow-x应用于body并没有真正起作用之外，一切正常。我的意思是当你滑动到左边仍然是滚动的（如果按键盘上的右箭头，你可以在桌面上实现相同效果）。那么在使用这种方法时，我们怎样才能完全禁止在手机上水平滚动？

这里是我的jsfiddle： http://jsfiddle.net/kzgvL6ba/

这是我的例子： HTML：

<body>
    <article>
        <div class="extendfull">Full-width Bars</div>
    </article>
</body>

的CSS：

body
{
    overflow-x: hidden;
}
article {
    background-color: #DDDDDD;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    display: block;
    margin: 0 auto;
    padding: 0 10px;
    width: 60%;
}
div.extendfull {
    background-color: #ccf;
    border: 1px solid #66c;
    font-size: 1.8em;
    font-weight: normal;
    padding-left: 3000px;
    margin-left: -3000px;
    padding-right: 3000px;
    margin-right: -3000px;
}

谢谢！

Answer 1

不确定这是否是您正在寻找的解决方案，但添加另一个容器以删除右侧的滚动并获得相同的结果（我认为......）

<body>
    <div style="overflow-x: hidden">
        <article>
            <div class="extendfull">Full-width Bars</div>
        </article>
    </div>
</body>

fiddle

Answer 2

我认为这应该有效：

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

在容器外扩展div - overflow-x mobile问题

2 个答案: