在容器外展开 div - overflow-x 移动问题答案

【问题标题】：Expand div outside container - overflow-x mobile issue在容器外展开 div - overflow-x 移动问题
【发布时间】：2014-11-11 12:14:54
【问题描述】：

最近我尝试this method 在其容器外增加我的 div 背景颜色。除了在移动浏览器上将溢出-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;
}

谢谢！

【问题讨论】：

标签： html css mobile responsive-design

【解决方案1】：

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

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

fiddle

【讨论】：

【解决方案2】：

我认为这应该可行：

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

【讨论】：

这会禁用缩放吗？如果是这样，那不是我要找的。谢谢。