Overflow-x:hidden 不会阻止内容在移动浏览器中溢出答案

【问题标题】：Overflow-x:hidden doesn't prevent content from overflowing in mobile browsersOverflow-x:hidden 不会阻止内容在移动浏览器中溢出
【发布时间】：2012-12-25 13:23:56
【问题描述】：

我有一个网站here。

在桌面浏览器中查看，黑色菜单栏仅正确延伸到窗口边缘，因为body 具有overflow-x:hidden。

在任何移动浏览器中，无论是 Android 还是 iOS，黑色菜单栏都会显示其全宽，这会在页面右侧带来空白。据我所知，这个空格甚至不是html 或body 标签的一部分。

即使我在<head> 中将视口设置为特定宽度：

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

站点扩展至 1100 像素，但仍有超过 1100 像素的空白。

我错过了什么？如何将视口保持在 1100 并切断溢出？

【问题讨论】：

这在 iOS9 中尤为突出

标签： css overflow viewport mobile-browser

【解决方案1】：

以下作品

body,
.innerbodywrapper{
overflow-x: hidden;
position: fixed;
width: 100%;
height: 100vh;
}

【讨论】：

【解决方案2】：

步骤1：将位置设置为固定到从视口出来的元素。在我的情况下是：

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

Step2：在body和html中添加一个css属性：

body, html{
    overflow-x:  hidden;
}

我没有添加任何包装。只有这两个步骤对我有用。我正在做的项目是一个有角度的项目。

【讨论】：

【解决方案3】：

解决这个问题的最简单方法，添加

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

【讨论】：

【解决方案4】：

我从这个主题的回复中尝试了很多方法，大部分都有效，但有一些副作用，比如如果我在 body,html 上使用 overflow-x，当用户在移动设备上向下滚动时，它可能会减慢/冻结页面。

在 body 内部的 wrapper/div 上使用 position: fixed 也很好，但是当我有一个菜单并使用 Javascript 单击动画滚动到某个部分时，它不起作用。

所以，我决定在 body 内部的 wrapper/div 上使用 touch-action: pan-y pinch-zoom。问题解决了。

【讨论】：

【解决方案5】：

在<body> 中创建一个站点包装器div 并将overflow-x:hidden 应用于包装器 而不是<body> 或<html> 解决了这个问题。

解析<meta name="viewport">标签的浏览器似乎只是忽略了html和body标签上的overflow属性。

注意：您可能还需要将position: relative 添加到包装器 div。

【讨论】：

我发现除了将overflow设置为hidden之外，我还必须将position设置为fixed...
将位置添加到固定位置会阻止我滚动！
我试过了，我把我所有的代码都放在了一个 div 中并给它溢出-x:hidden 但不起作用，我添加了但没有任何改变：/有什么想法吗？
@leepowers overflow-x: hidden 即使在我添加了此元标记后仍然无法为我工作。您能否分享一个指向您正在运行的网站的链接？
嘿伙计，当我发现position:relative 也可以工作时。

【解决方案6】：

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

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

【讨论】：

它似乎有效。但是你有解释为什么会这样吗？
不，它终于没用了。我最终做了数学计算并确保 div 的宽度不超过允许的范围，css calc() 在这里帮了我很多，因为它允许混合相对宽度（vw 或 %）和绝对宽度（px）。
这是唯一能帮助我隐藏一个绝对定位的元素，它会在屏幕外显示动画
我不敢相信这在 2019 年仍然是一个问题。但上面的解决方案完全有效。谢谢。
在body 上设置overflow-x: hidden 的问题是position: sticky 停止工作。

【解决方案7】：

我已经为此工作了几个小时，尝试了此页面和其他页面中的各种组合。最终对我有用的事情是制作一个站点包装器 div，正如接受的答案中所建议的那样，但是将两个溢出都设置为隐藏，而不仅仅是 x 溢出。如果我在滚动时离开溢出-y，我最终会得到一个仅垂直滚动几个像素然后停止的页面。

#all-wrapper {
  overflow: hidden;
}

这样就足够了，无需在 body 或 html 元素上设置任何内容。

【讨论】：

【解决方案8】：

在正文中创建站点包装器 div 并将溢出->x:hidden 应用于正文或 html 的包装器 INSTEAD 解决了该问题。

在将 position: relative 添加到包装器之后，这对我有用。

【讨论】：

这对我有用。副作用是我有两个滚动条而不是一个。解决方案是使用overflow: hidden 而不是overflow-x: hidden。适用于 OSX 和 Win 上的移动 Safari、Chrome、IE11。

【解决方案9】：

为我的引导模式（包含一个表单）解决此问题的唯一方法是将以下代码添加到我的 CSS：

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

【讨论】：

【解决方案10】：

正如 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

【讨论】：

【解决方案11】：

正如@Indigenuity 所说，这似乎是由解析<meta name="viewport"> 标记的浏览器引起的。

要从源头解决这个问题，请尝试以下方法：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

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

【讨论】：

将initial-scale=1 添加到现有的视口元标记确实可以解决问题。谢谢！
对我来说是minimum-scale=1 修复了它
在尝试了其他所有方法之后，这对我来说实际上是有效的。非常感谢！
它有帮助，但还不能阻止移动设备上的水平滚动条。
哇，谢谢。这发生在我的案例中。只有在媒体查询中，空格才会出现在底部和右侧。你兄弟应该得到一百万以上，谢谢

【解决方案12】：

我通过使用 overflow-x:hidden; 解决了这个问题；如下

@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

【讨论】：

【解决方案13】：

以前没有一个单一的解决方案对我有用，我不得不将它们混合起来，并且在旧设备（iphone 3）上也解决了这个问题。

首先，我必须将 html 内容包装到外部 div 中：

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

然后我不得不将溢出隐藏应用到包装器，因为溢出-x 不起作用：

  #wrapper {
    overflow: hidden;
  }

这解决了问题。

【讨论】：

这与@Indigenuity 的回答有何不同？
@ian Kemp 溢出：隐藏！=溢出-x：隐藏

【解决方案14】：

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

适用于 iOS9

【讨论】：

它确实有效，但是将 position:fixed 放在你的身体上确实会让你滚动到顶部
很奇怪，但它在没有固定位置的情况下也适用于我。这里的所有解决方案中只有一个！
只有一个对我有用，使用 chrom 和 boostrap + angularJS

【解决方案15】：

我在 Android 设备上遇到了同样的问题，但在 iOS 设备上没有。通过在绝对定位元素的外部 div 中指定 position:relative 来解决（溢出：对于外部 div 隐藏）

【讨论】：

【解决方案16】：

VictorS 对accepted answer 的评论应该是它自己的答案，因为它是一个非常优雅的解决方案，确实有效。我会添加一点它的用处。

Victor 注释添加 position:fixed 有效。

body.modal-open {
    overflow: hidden;
    position: fixed;
}

确实如此。但是，它也有一个轻微的副作用，即基本上滚动到顶部。 position:absolute 解决了这个问题，但重新引入了在移动设备上滚动的功能。

如果您知道您的视口 (my plugin for adding viewport to the <body>)，您可以为 position 添加一个 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; 
}

我还添加了这个以防止底层页面在显示/隐藏模式时向左/向右跳转。

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

【讨论】：

有没有办法让移动部分不跳到顶部？
对我有用的是将应该被溢出隐藏的元素从位置：绝对位置：固定。谢天谢地。
@WraithKenny - 如果您希望页面防止在移动设备上跳转到顶部，您可以使用以下 hack'ish/ugly 方法。在您的模态函数中，确保在执行任何操作之前获得当前的滚动偏移量，而不是一起应用模态样式并将您的主体的上边距设置为等于当前偏移量的负数。确保当您删除模态框时，将边距设置回 0 并将页面滚动回原始偏移量。
此解决方案仅适用于您的模态内容适合屏幕的情况，即您不需要滚动模态本身。
我的页面上还有其他固定和绝对定位的元素。使身体position:fixed or absolute 扰乱他们的位置。不适合/在我的情况下工作:(

【解决方案17】：

在整个内容周围添加包装器<div> 确实会起作用。虽然语义上“恶心”，但我在 body 标记内添加了一个带有类 overflowWrap 的 div，然后像这样设置我的 CSS：

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

现在可能有点矫枉过正，但效果很好！

【讨论】：

【解决方案18】：

保持视口不变：<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当然把左边的菜单留到了bar的边缘，你可以把剩下的40px分别放到li,20px 左右两边：

.menuitem {
display: block;
padding: 0px 20px;
}

当您将浏览器缩小时，您会发现仍然是白色背景：将背景纹理从您的 div 放置到 body。或者，使用媒体查询将导航菜单宽度从 100% 调整为较低的值。需要对您的代码进行很多调整以创建正确的布局，我不确定您打算做什么，但上面的代码会以某种方式修复您的溢出栏。

【讨论】：

如果您使用box-sizing: border-box;，您可以将填充添加到 100% 宽度的 div。

【解决方案19】：

试试

html, body {
  overflow-x:hidden 
}

而不仅仅是

body {
  overflow-x:hidden 
}

【讨论】：

谢谢，但是将overflow 应用到html 和/或body 的任何组合都不能解决问题。
很抱歉，它没有为您解决。在我回答之前，我使用您的网站进行了快速测试，并将我的建议应用于您的 css。它至少解决了我的安卓手机上标准浏览器和海豚浏览器的问题。
为我工作。 eduardd.eu/projects/ezo（在 480 到 992 像素之间的页脚对女人和毛巾的溢出图像有问题）
有谁知道为什么会这样，当分别指定 body{} 和 html{} 时不起作用？
还需要添加height:100%;，否则垂直滚动在加载图像的页面上无法正常工作（这会使页面高度增加）。