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

Question

我在这里有一个网站。

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

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

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

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

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

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

score 332 · Accepted Answer

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

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

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

score 99 · Accepted Answer

99

尝试

html, body {
  overflow-x:hidden 
}

而不仅仅是

body {
  overflow-x:hidden 
}

于 2013-01-11T02:41:51.850 回答

score 76 · Accepted Answer

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

维克多注意到添加position:fixed作品。

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

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

如果您知道您的视口（我的用于将视口添加到的插件<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; 
}

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

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

score 39 · Accepted Answer

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

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

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

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

score 37 · Accepted Answer

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

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

score 16 · Accepted Answer

16

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

适用于iOS9

于 2015-09-21T15:02:09.830 回答

score 6 · Accepted Answer

保持视口不变：<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 当然会将左侧菜单留在栏的边缘，您可以将剩余的40px放在左右两边各20px上li：

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

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

score 6 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

现在可能有点矫枉过正，但就像一个魅力！

score 4 · Accepted Answer

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

score 4 · Accepted Answer

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

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

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

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

  #wrapper {
    overflow: hidden;
  }

这解决了这个问题。

score 3 · Accepted Answer

我通过使用 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

score 3 · Accepted Answer

正如 subarachnid 所说，overflow-x 为 body 和 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;
}

关联

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

#all-wrapper {
  overflow: hidden;
}

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

以下作品

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

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

19 回答 19

Related

Reference