blocks|key|183423|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183424|html,+body+{
++overflow-x:hidden+
}+|code-block|syntax|javascript|183425|而不是仅仅|183426|body+{
++overflow-x:hidden+
}|183427|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

try

<pre><code>html, body {
 overflow-x:hidden 
} 
</code></pre>

instead of just

<pre><code>body {
 overflow-x:hidden 
}
</code></pre>

blocks|key|183607|text|正如@Indigenuity所说，这似乎是由浏览器解析<meta+name="viewport">标签引起的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|183608|要从源头上解决此问题，请尝试以下操作：|183609|<meta+name="viewport"+content="width=device-width,+initial-scale=1,+minimum-scale=1">。|183610|在我的测试中，这阻止了用户缩小以查看溢出的内容，因此也阻止了平移/滚动到它。|183611|entityMap^0|R|M|0|0|0|2D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|M|$]]

As @Indigenuity states, this appears to be caused by browsers parsing the <code>&lt;meta name="viewport"&gt;</code> tag.

To solve this problem at the source, try the following:

<code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"&gt;</code>.

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.

blocks|key|183780|text|这是在Safari中解决水平滚动的最简单的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183781|html,+body+{
++position:relative;
++overflow-x:hidden;
}|code-block|syntax|javascript|183782|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is the simplest solution to solve horisontal scrolling in Safari.

<pre><code>html, body {
 position:relative;
 overflow-x:hidden;
}
</code></pre>

blocks|key|183508|text|body{
height:+100%25;
overflow:+hidden+!important;
width:+100%25;
position:+fixed;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|183509|在iOS9上工作|unstyled|183510|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
</code></pre>

works on iOS9

blocks|key|183452|text|在整个内容周围添加一个包装器<div>确实是可行的。虽然在语义上很“讨厌”，但我在body标签中添加了一个带有overflowWrap类的div，然后像这样设置我的CSS：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|183453|html,+body,+.overflowWrap+{
overflow-x:+hidden;
}|code-block|syntax|javascript|183454|现在可能有点杀伤力了，但效果很好！|183455|entityMap^0|E|5|15|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Adding a wrapper <code>&lt;div&gt;</code> around the entirety of your content will indeed work. While semantically "icky", I added an div with a class of overflowWrap right inside the <code>body</code> tag and then set set my CSS like this:

<pre><code>html, body, .overflowWrap {
overflow-x: hidden;
}
</code></pre>

Might be overkill now, but works like a charm!

blocks|key|183494|text|我在安卓设备上遇到了同样的问题，但iOS设备没有。通过在绝对定位元素的外部div中指定position:relative来进行解析(对于外部div，使用overflow:隐藏)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183495|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I encountered the same problem with Android devices but not iOS devices. Managed to resolve by specifying position:relative in the outer div of the absolutely positioned elements (with overflow:hidden for outer div)

blocks|key|401587|text|之前没有一个单一的解决方案对我有效，我不得不将它们混合在一起，并在旧设备上解决了这个问题(IPhone3)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|401588|首先，我必须将html内容包装到一个外部div中：|401589|<html>
++<body>
++++<div+id="wrapper">...+old+html+goes+here+...</div>
++</body>
</html>|code-block|syntax|javascript|401590|然后我不得不将overflow隐藏到包装器中，因为overflow-x不起作用：|401591|++#wrapper+{
++++overflow:+hidden;
++}|401592|这就解决了这个问题。|401593|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

No previous single solution worked for me, I had to mix them and got the issue fixed also on older devices (iphone 3).

First, I had to wrap the html content into an outer div:

<pre><code>&lt;html&gt;
 &lt;body&gt;
 &lt;div id="wrapper"&gt;... old html goes here ...&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

Then I had to apply overflow hidden to the wrapper, because overflow-x was not working:

<pre><code> #wrapper {
 overflow: hidden;
 }
</code></pre>

and this fixed the issue.

blocks|key|183571|text|我通过使用overflow-x:hidden解决了这个问题，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183572|@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;
+++}
+}|code-block|syntax|javascript|183573|结构如下所示|183574|1st+div+end_screen+>>+inside+it+>>+end_screen_2(div)+>>+inside+it+>>+end_screen_2.|offset|length|style|CODE|183575|'end_screen+is+the+wrapper+of+end_screen_1+and+end_screen_2+div's|183576|entityMap^0|0|0|0|0|2A|0|0|1T|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@$K|Z|L|10|M|N]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

I solved the issue by using overflow-x:hidden; as follows

<pre><code>@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;
 }
 }
</code></pre>

structure is as follows

<code>1st div end_screen &gt;&gt; inside it &gt;&gt; end_screen_2(div) &gt;&gt; inside it &gt;&gt; end_screen_2.</code>

<code>'end_screen is the wrapper of end_screen_1 and end_screen_2 div's</code>

blocks|key|401679|text|正如subarachnid所说的那样，对body和html隐藏的overflow-x在这里的工作示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|401680|**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%25;
++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;
}|code-block|syntax|javascript|401681|Link|offset|length|401682|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Lkqyka7n/1/^0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

As subarachnid said overflow-x hidden for both body and html worked
Here's working example

<pre><code>**HTML**
&lt;div class="contener"&gt;
 &lt;div class="menu"&gt;
 das
 &lt;/div&gt;
 &lt;div class="hover"&gt;
 &lt;div class="img1"&gt;
 First Strip
 &lt;/div&gt;
 &lt;div class="img2"&gt;
 Second Strip
 &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="baner"&gt;
dsa
&lt;/div&gt;

**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;
}
</code></pre>

<a href="http://jsfiddle.net/Lkqyka7n/1/" rel="nofollow">Link</a>

blocks|key|183817|text|我在这个主题中尝试了许多回复的方法，大多数都有效，但得到了一些副作用，比如如果我在body,html上使用overflow-x，当用户在移动设备上向下滚动时，它可能会减慢/冻结页面。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|183818|在包装器/目录中使用position:+fixed也不错，但当我有一个菜单并使用Javascript单击动画滚动到某些部分时，它不工作。|183819|因此，我决定在主体内部的包装器/div上使用touch-action:+pan-y+pinch-zoom。问题解决了。|183820|entityMap^0|15|9|0|A|F|0|M|U|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

I had tried many ways from replies in this topic, mostly works but got some side-effect like if I use overflow-x on <code>body,html</code> it might slow/freeze the page when users scroll down on mobile.

use <code>position: fixed</code> on wrapper/div inside the body is good too, but when I have a menu and use Javascript click animated scroll to some section, It's not working.

So, I decided to use <code>touch-action: pan-y pinch-zoom</code> on wrapper/div inside the body. Problem solved.

blocks|key|183865|text|解决此问题的最简单方法是添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183866|<meta+name="viewport"+content="width=device-width,+user-scalable=no,+initial-scale=1.0,+maximum-scale=1.0,+minimum-scale=1.0">|offset|length|style|CODE|183867|entityMap^0|0|0|3I|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

easiest way to solve this , add
<code> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;&gt;</code>

blocks|key|401768|text|我已经在这上面工作了几个小时，尝试了这个页面和其他页面的各种组合。最终对我起作用的是创建一个站点包装器div，正如公认的答案中所建议的那样，但将两个溢出都设置为隐藏，而不仅仅是x溢出。如果我将overflow-y留在scroll上，我得到的页面只会垂直滚动几个像素，然后就会停止。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|401769|#all-wrapper+{
++overflow:+hidden;
}|code-block|syntax|javascript|401770|这就足够了，不需要在body或html元素上设置任何东西。|401771|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I've just been working on this for a few hours, trying various combinations of things from this and other pages. The thing that worked for me in the end was to make a site wrapper div, as suggested in the accepted answer, but to set both overflows to hidden instead of just the x overflow. If I leave overflow-y at scroll, I end up with a page that only scrolls vertically by a few pixels and then stops.

<pre><code>#all-wrapper {
 overflow: hidden;
}
</code></pre>

Just this was enough, without setting anything on the body or html elements.

blocks|key|183685|text|为我的引导模式(包含一个表单)解决这个问题的唯一方法是将以下代码添加到我的CSS中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183686|.modal+{
++++-webkit-overflow-scrolling:+auto!important;
}|code-block|syntax|javascript|183687|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The only way to fix this issue for my bootstrap modal (containing a form) was to add the following code to my CSS:

<pre><code>.modal {
 -webkit-overflow-scrolling: auto!important;
}
</code></pre>

blocks|key|183917|text|步骤1:将位置设置为固定到从视口中移出的元素。在我的例子中，它是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183918|.nav-links+{
++++position:fixed;
++++right:0px;
++++background-color:rgba(0,0,0,+0.8);
++++height:85vh;
++++top:8vh;
++++display:flex;
++++flex-direction:column;
++++align-items:+center;
++++width:40%25;
++++transform:+translateX(100%25);
++++transition:+transform+0.5s+ease-in;
}|code-block|syntax|javascript|183919|Step2:将css属性添加到body和html中，如下所示：|183920|body,+html{
++++overflow-x:++hidden;
}|183921|我没有添加任何包装器。只有这两个步骤对我有效。我正在做的项目是一个angular项目。|183922|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

step 1: set position to fixed to the element that goes out from the viewport. In my case it is:
<pre><code>.nav-links {
 position:fixed;
 right:0px;
 background-color:rgba(0,0,0, 0.8);
 height:85vh;
 top:8vh;
 display:flex;
 flex-direction:column;
 align-items: center;
 width:40%;
 transform: translateX(100%);
 transition: transform 0.5s ease-in;
}
</code></pre>
Step2: add a css property to body and html as:
<pre><code>body, html{
 overflow-x: hidden;
}
</code></pre>
I didn't add any wrapper. Only these two steps worked for me. The project I am working on is an angular project.

blocks|key|183927|text|下面的作品|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183928|body,
.innerbodywrapper{
overflow-x:+hidden;
position:+fixed;
width:+100%25;
height:+100vh;
}|code-block|syntax|javascript|183929|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The following works
<pre><code>body,
.innerbodywrapper{
overflow-x: hidden;
position: fixed;
width: 100%;
height: 100vh;
}
</code></pre>

I have a website <a href="http://02b23fa.netsolhost.com/wordpress1/">here</a>.

Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the <code>body</code> has <code>overflow-x:hidden</code>. 

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 <code>html</code> or <code>body</code> tags. 

Even if I set the viewport to a specific width in the <code>&lt;head&gt;</code>:

<pre><code>&lt;meta name="viewport" content="width=1100, initial-scale=1"&gt;
</code></pre>

The site expands to the 1100px but still has the whitespace beyond the 1100. 

What am I missing? How do I keep the viewport to 1100 and cut off the overflow?

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

我有一个网站。在桌面浏览器中查看时，由于body具有overflow-x:hidden，因此黑色菜单栏仅正确地延伸到窗口边缘。在任何移动浏览器中，无论是安卓系统还是iOS系统，黑色菜单栏都会显示全宽，页面右侧留有空格。据我所知，这个空格甚至不是html或body标记的一部分。即使我在<head>中将视口设置为特定宽度<meta name="viewport" content="width=1100

问Overflow-x:hidden不能防止内容在移动浏览器中溢出
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Overflow-x:hidden不能防止内容在移动浏览器中溢出EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Overflow-x:hidden不能防止内容在移动浏览器中溢出
EN