我有一个网站在这里 。
在桌面浏览器中查看，黑色菜单栏中正确只延伸到窗口的边缘，因为body有overflow-x:hidden 。
在任何手机浏览器，无论是Android或iOS，黑色的菜单栏将显示它的整个宽度，带来空白页面的右侧。 据我所知，这种空白不是的，甚至部分html或body标记。
即使我视口设置为在一个特定的宽度<head>
<meta name="viewport" content="width=1100, initial-scale=1">
该网站扩展到1100px，但仍然有空白超越1100。
我在想什么？ 如何保持视口1100和切断溢出？
创建内部站点包装DIV body和应用overflow-x:hidden在包装代替的body或html固定的问题。
看来，这解析浏览器<meta name="viewport">标签简单地忽略overflow的属性， html和body标记。
尝试
html, body {
overflow-x:hidden
}
而不是只
body {
overflow-x:hidden
}
胜利者的的评论接受的答案不愧为它自己的答案，因为这是一个非常优雅的解决方案，它确实工作。 我会加一点点给它的实用性。
维克多指出添加position:fixed作品。
body.modal-open {
overflow: hidden;
position: fixed;
}
而事实上它。 但是，它也有一个轻微的副作用影响的本质滚动到顶部。 position:absolute做出决议这一点，但，再引入滚动移动的能力。
如果你知道你的视口（ 我添加视口插件<body>你只需添加一个CSS切换的position 。
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
我还添加是为了防止潜在的页面跳转左/右显示/隐藏模态时。
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
适用于iOS9
As @Indigenuity states, this appears to be caused by browsers parsing the <meta name="viewport"> tag.
To solve this problem at the source, try the following:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
In my tests this prevents the user from zooming out to view the overflowed content, and as a result prevents panning/scrolling to it as well.
这是解决horisontal滚动Safari中的简单的解决方案。
html, body {
position:relative;
overflow-x:hidden;
}
以前没有单一的解决方案为我工作，我不得不将它们混合，得到了也固定在旧的手机（iphone 3）的问题。
首先，我不得不HTML内容包装成一个外层div：
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
然后，我不得不申请溢出隐藏到包装，因为溢出-X不工作：
#wrapper {
overflow: hidden;
}
而这个固定的问题。
保持视口不变： <meta name="viewport" content="width=device-width, initial-scale=1.0">
假设你想实现一个连续的黑条右侧的效果： #menubar不应超过100％，调整圆角半径使得右侧的平方和调整填充，使其扩展多一点正确的。 修改以下到您#menubar ：
border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/
调整padding到课程10px的从左侧菜单栏的边缘，你可以把剩下的40像素到每个的li ，每边20像素的左，右：
.menuitem {
display: block;
padding: 0px 20px;
}
当您调整浏览器时，你会发现仍然是白色背景：把你的背景纹理，而不是从你的div body 。 或可选地，从100％调整导航菜单宽度使用媒体查询来降低值。 有很多对你的代码来创建一个适当的布局进行调整的，我不知道你打算怎么做，但上面的代码会以某种方式解决您四溢吧。
添加一个包装<div>内容的全部周围的确会奏效。 虽然语义上“恶心”，我增加了一个DIV一类overflowWrap的右内侧body标签，然后设置设置我的CSS是这样的：
html, body, .overflowWrap {
overflow-x: hidden;
}
可能是矫枉过正了，但就像一个魅力！
我遇到同样的问题与Android设备，但没有iOS设备。 管理通过指定位置来解决：在相对于绝对定位元件的外层div（与溢出：隐藏用于外层div）
创建身体内部部位的包装股利和应用overflow-> X：隐藏的包装，而不是身体或HTML的固定的问题。
这之后还加入工作对我来说position: relative的包装。
我用溢出-X解决该问题：隐藏; 如下
@media screen and (max-width: 441px){
#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
overflow-x: hidden;
}
}
结构如下
1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.
'end_screen is the wrapper of end_screen_1 and end_screen_2 div's
正如subarachnid所说的溢流-X隐藏的身体和HTML在这里工作的工作例
**HTML**
<div class="contener">
<div class="menu">
das
</div>
<div class="hover">
<div class="img1">
First Strip
</div>
<div class="img2">
Second Strip
</div>
</div>
</div>
<div class="baner">
dsa
</div>
**CSS**
body, html{
overflow-x:hidden;
}
body{
margin:0;
}
.contener{
width:100vw;
}
.baner{
background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
width:100vw;
height:400px;
margin-left:0;
left:0;
}
.contener{
height:100px;
}
.menu{
display:flex;
background-color:teal;
height:100%;
justify-content:flex-end;
align:content:bottom;
}
.img1{
width:150px;
height:25px;
transform:rotate(45deg);
background-color:red;
position:absolute;
top:40px;
right:-50px;
line-height:25px;
padding:0 20px;
cursor:pointer;
color:white;
text-align:center;
transition:all 0.4s;
}
.img2{
width:190px;
text-align:center;
transform:rotate(45deg);
background-color:#333;
position:absolute;
height:25px;
line-height:25px;
top:55px;
right:-50px;
padding:0 20px;
cursor:pointer;
color:white;
transition:all 0.4s;
}
.hover{
overflow:hidden;
}
.hover:hover .img1{
background-color:#333;
transition:all 0.4s;
}
.hover:hover .img2{
background-color:blue;
transition:all 0.4s;
}
链接
我刚刚一直在这几个小时，从这个和其他的网页尝试的东西不同组合。 那到底为我工作的事情是做一个网站包装DIV，作为公认的答案建议，但双方溢出设置为隐藏，而不是仅仅在x溢出。 如果我离开溢出-Y在滚动，我结束了一个网页，只有几个像素垂直滚动，然后停止。
#all-wrapper {
overflow: hidden;
}
只是这已经足够了，无需设置在身体或html元素任何东西。
解决这个问题对我的引导模式（包含表单）的唯一方法是将以下代码添加到我的CSS：
.modal {
-webkit-overflow-scrolling: auto!important;
}
