CSS Overflow-x:hidden 不会阻止内容在移动浏览器中溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14270084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
提问by Indigenuity
I have a website here.
我这里有一个网站。
Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the bodyhas overflow-x:hidden.
在桌面浏览器中查看，黑色菜单栏中正确只延伸到窗口的边缘，因为body有overflow-x:hidden。
In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the htmlor bodytags.
在任何移动浏览器中，无论是 Android 还是 iOS，黑色菜单栏都显示其全宽，这会在页面右侧带来空白。据我所知，这个空白甚至不是htmlorbody标签的一部分。
Even if I set the viewport to a specific width in the <head>:
即使我将视口设置为特定宽度<head>：
<meta name="viewport" content="width=1100, initial-scale=1">
The site expands to the 1100px but still has the whitespace beyond the 1100.
该网站扩展到 1100 像素，但仍然有超过 1100 的空白。
What am I missing? How do I keep the viewport to 1100 and cut off the overflow?
我错过了什么？如何将视口保持在 1100 并切断溢出？
回答by Indigenuity
Creating a site wrapper div inside the <body>and applying the overflow-x:hiddento the wrapperinstead of the <body>or <html>fixed the issue.
在里面创建一个站点包装器 div<body>并将 应用overflow-x:hidden到包装器而不是<body>或<html>修复了问题。
It appears that browsers that parse the <meta name="viewport">tag simply ignore overflowattributes on the htmland bodytags.
解析<meta name="viewport">标签的浏览器似乎只是忽略overflow了html和body标签上的属性。
Note: You may also need to add position: relativeto the wrapper div.
注意：您可能还需要添加position: relative到包装器 div。
回答by subarachnid
try
尝试
html, body {
overflow-x:hidden
}
instead of just
而不仅仅是
body {
overflow-x:hidden
}
回答by Brad
VictorS's comment on the accepted answerdeserves to be it's own answer because it's a very elegant solution that does, indeed work. And I'll add a tad to it's usefulness.
VictorS对已接受答案的评论应该是它自己的答案，因为它是一个非常优雅的解决方案，确实有效。我会补充一点它的用处。
Victor notes adding position:fixedworks.
维克多注意到添加position:fixed作品。
body.modal-open {
overflow: hidden;
position: fixed;
}
And indeed it does. However, it also has a slight side-affect of essentially scrolling to the top. position:absoluteresolves this but, re-introduces the ability to scroll on mobile.
确实如此。但是，它也有轻微的副作用，即基本上滚动到顶部。position:absolute解决了这个问题，但重新引入了在移动设备上滚动的能力。
If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the position.
如果您知道您的视口（我的插件，用于将视口添加到<body>），您只需为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;
}
I also add this to prevent the underlying page from jumping left/right when showing/hiding modals.
我还添加了这个以防止底层页面在显示/隐藏模式时向左/向右跳转。
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
回答by Waltur Buerk
This is the simplest solution to solve horisontal scrolling in Safari.
这是解决 Safari 中水平滚动的最简单解决方案。
html, body {
position:relative;
overflow-x:hidden;
}
回答by Tempurturtul
As @Indigenuity states, this appears to be caused by browsers parsing the <meta name="viewport">tag.
正如@Indigenuity 所说，这似乎是由浏览器解析<meta name="viewport">标签引起的。
To solve this problem at the source, try the following:
要从源头上解决此问题，请尝试以下操作：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
<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.
在我的测试中，这可以防止用户缩小以查看溢出的内容，因此也可以防止平移/滚动到它。
回答by ollio
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
works on iOS9
适用于 iOS9
回答by Isaac F
Creating a site wrapper div inside the body and applying the overflow->x:hidden to the wrapper INSTEAD of the body or html fixed the issue.
在正文中创建一个站点包装器 div 并将 overflow->x:hidden 应用于正文或 html 的包装器 INSTEAD 修复了该问题。
This worked for me after also adding position: relativeto the wrapper.
在添加position: relative到包装器之后，这对我有用。
回答by Anne
Keep the viewport untouched: <meta name="viewport" content="width=device-width, initial-scale=1.0">
保持视口不变： <meta name="viewport" content="width=device-width, initial-scale=1.0">
Assuming you would like to achieve the effect of a continuous black bar to the right side: #menubarshouldn't exceed 100%, adjust the border radiussuch that the right side is squared and adjust the padding so that it extends a little more to the right. Modify the following to your #menubar:
假设您想在右侧实现连续黑条的效果：#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*/
Adjusting the paddingto 10px of course leaves the left menu to the edge of the bar, you can put the remaining 40pxto each of the li, 20pxon each side left and right:
调整padding到课程叶子10px的左边菜单栏的边缘，你可以把剩下的40像素到每个li，20像素每边左，右：
.menuitem {
display: block;
padding: 0px 20px;
}
When you resize the browser smaller, you would find still the white background: place your background texture instead from your div to body. Or alternatively, adjust the navigation menu width from 100% to lower value using media queries. There are a lot of adjustments to be made to your code to create a proper layout, I'm not sure what you intend to do but the above code will somehow fix your overflowing bar.
当您将浏览器调整为较小时，您会发现仍然是白色背景：将背景纹理从 div 改为body. 或者，使用媒体查询将导航菜单宽度从 100% 调整为较低的值。需要对您的代码进行很多调整以创建适当的布局，我不确定您打算做什么，但上面的代码会以某种方式修复您的溢出栏。
回答by MBurnette
Adding a wrapper <div>around the entirety of your content will indeed work. While semantically "icky", I added an div with a class of overflowWrap right inside the bodytag and then set set my CSS like this:
<div>为整个内容添加一个包装器确实会起作用。虽然语义上“令人讨厌”，但我在body标签内添加了一个带有 overflowWrap 类的 div，然后像这样设置我的 CSS：
html, body, .overflowWrap {
overflow-x: hidden;
}
Might be overkill now, but works like a charm!
现在可能有点矫枉过正，但效果很好！
回答by spaghetticode
No previous single solution worked for me, I had to mix them and got the issue fixed also on older devices (iphone 3).
以前没有一个单一的解决方案对我有用，我不得不混合它们并在旧设备（iphone 3）上解决这个问题。
First, I had to wrap the html content into an outer div:
首先，我必须将 html 内容包装到外部 div 中：
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
Then I had to apply overflow hidden to the wrapper, because overflow-x was not working:
然后我不得不将溢出隐藏应用于包装器，因为溢出-x 不起作用：
#wrapper {
overflow: hidden;
}
and this fixed the issue.
这解决了这个问题。
