Overflow-x:hidden并不能阻止移动浏览器中溢出的内容。

I have a website here.

我有一个网站。

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

在桌面浏览器中，黑色的菜单栏适当地扩展到窗口的边缘，因为它的主体是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 html or body tags.

在任何移动浏览器中，无论是Android还是iOS，黑色菜单栏都显示了它的全宽，这就使得页面右侧的空格出现。据我所知，这个空格甚至不是html或正文标记的一部分。

Even if I set the viewport to a specific width in the <head>:

即使我将viewport设置为中的特定宽度:

<meta name="viewport" content="width=1100, initial-scale=1">

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

该站点扩展到1100px，但仍然保留了1100的空白。

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

我缺少什么?如何将viewport保持到1100，并切断溢出?

16 个解决方案

#1

182

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:隐藏到包装器而不是主体或html修复问题。

It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.

看起来，解析标签的浏览器会忽略html和body标签上的溢出属性。

#2

VictorS's comment on the accepted answer deserves 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.

胜利者对被接受的答案的评论应该是它自己的答案，因为它是一个非常优雅的解决方案，确实有效。我会添加一个tad，它是有用的。

Victor notes adding position:fixed works.

Victor注意添加位置:固定工作。

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:absolute resolves this but, re-introduces the ability to scroll on mobile.

事实上确实如此。然而，它也有轻微的副作用，基本上是滚动到顶部。位置:绝对解决了这个问题，但重新介绍了滚动移动的能力。

If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the position.

如果你知道你的viewport(我的插件添加viewport到)，你可以添加一个css切换到这个位置。

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.

我还添加了这一点，以防止在显示/隐藏modals时从左/右跳转的基础页面。

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

#3

try

试一试

html, body {
  overflow-x:hidden 
}

instead of just

而不是仅仅

body {
  overflow-x:hidden 
}

#4

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

works on iOS9

iOS9工作

#5

As @Indigenuity states, this appears to be caused by browsers parsing the <meta name="viewport"> tag.

作为@Indigenuity状态，这似乎是由浏览器解析标签引起的。

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.

在我的测试中，这可以防止用户放大查看溢出的内容，因此也防止了平移/滚动。

#6

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:

然后我必须将溢出隐藏到包装器中，因为overflow-x不起作用:

  #wrapper {
    overflow: hidden;
  }

and this fixed the issue.

这就解决了这个问题。

#7

Keep the viewport untouched: <meta name="viewport" content="width=device-width, initial-scale=1.0">

保持viewport不变: 。

Assuming you would like to achieve the effect of a continuous black bar to the right side: #menubar shouldn't exceed 100%, adjust the border radius such 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 padding to 10px of course leaves the left menu to the edge of the bar, you can put the remaining 40px to each of the li, 20px on each side left and right:

将内边距调整为10px，将左侧菜单设置为bar的边缘，你可以将剩下的40px分别放置到每个li, 20px左右两边。

.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%调整为更低的值。为了创建一个合适的布局，需要对代码进行大量的调整，我不确定您打算做什么，但是上面的代码将以某种方式修复您的溢出工具条。

#8

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 body tag and then set set my CSS like this:

在内容的整个部分添加一个包装器

确实有效。在语义上“令人讨厌”的时候，我在body标签中添加了一个超流包的div，然后设置了这样的CSS:

html, body, .overflowWrap {
overflow-x: hidden;
}

Might be overkill now, but works like a charm!

现在可能有点过分了，但是效果很好!

#9

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)

我在安卓设备上遇到了同样的问题，但不是iOS设备。通过指定位置来解决:相对于绝对定位元素的外部div(溢出:隐藏于外部div)

#10

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

这是在Safari中解决horisontal滚动的最简单的解决方案。

html, body {
  position:relative;
  overflow-x:hidden;
}

#11

There also seems to be an issue with having the body and html set to display:table;. Switching their display to block fixes it.

还有一个问题，就是让body和html集显示:表;切换显示以块修复它。

#12

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

我用overflow-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;
   }
 }

structure is as follows

结构如下

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

第1个div end_screen >>内部>> end_screen_2(div) >>内部>> end_screen_2。

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

end_screen是end_screen_1和end_screen_2 div的包装器。

#13

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

正如subarachnid所说的，对body和html隐藏的overflow-x在这里工作的例子。

**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;
}

Link

链接

#14

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并应用溢出->x:隐藏到包装器而不是主体或html修复问题。

This worked for me after also adding position: relative to the wrapper.

在添加位置之后，这对我起作用了:相对于包装器。

#15

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.

我已经做了几个小时的工作，尝试各种各样的组合，从这个和其他的页面。在我最后工作的是做一个站点包装器div，就像在接受的答案中建议的那样，但是要设置两个溢出来隐藏，而不是仅仅是x溢出。如果我把overflow-y放在滚动条上，我最终会得到一个只有几个像素垂直滚动的页面，然后停止。

#all-wrapper {
  overflow: hidden;
}

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

这就足够了，不需要在主体或html元素上设置任何内容。

#16

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

为我的bootstrap模式(包含表单)解决这个问题的惟一方法是向我的CSS添加以下代码:

.modal {
    -webkit-overflow-scrolling: auto!important;
}

#1

182