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

我有一个网站 给你。

在桌面浏览器中查看，黑色菜单栏正确地只扩展到窗口的边缘，因为 body有 overflow-x:hidden。

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

即使我在 <head>中将 viewport 设置为一个特定的宽度:

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

该网站扩展到1100px，但仍然有超过1100的空白。

我错过了什么? 我如何保持视窗1100和切断溢出？

256897 次浏览
小开

试试看

html, body {
overflow-x:hidden
}

而不是仅仅

body {
overflow-x:hidden
}
小开
最佳答案

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

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

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

小开

保持视图不变: <meta name="viewport" content="width=device-width, initial-scale=1.0">

假设你想在右边实现一个连续的黑色条的效果: #menubar不应该超过 百分百确定，调整 边界半径使右边成平方，并调整填充，使其向右边延伸一点。将以下内容修改为 #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放在 li和 20像素的左右两边:

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

当你调整浏览器的大小时，你会发现仍然是白色的背景: 把你的背景纹理从 div 改为 body。或者，也可以使用媒体查询将导航菜单宽度从100% 调整到较低值。为了创建一个合适的布局，需要对代码进行大量的调整，我不确定你打算怎么做，但是上面的代码会以某种方式修复你的溢出条。

小开

在整个内容周围添加一个包装器 <div>确实会起作用。在语义上“讨厌”的时候，我在 body标签中添加了一个 div，其中包含一个 overflow Wrap 类，然后像这样设置我的 CSS:

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

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

小开

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

Victor 注释添加 position:fixed作品。

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

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

如果你知道你的视口(我的插件添加视图到 <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;
}
小开

我在 Android 设备上遇到过同样的问题，但是在 iOS 设备上没有。通过在绝对定位元素的外部 div 中指定位置: 相对来解析(带溢出: 隐藏的外部 div)

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

可以在 iOS9上运行

小开

之前没有一个单一的解决方案对我有效，我不得不混合使用它们，并在旧设备(iphone3)上解决了这个问题。

首先，我必须将 html 内容封装到一个外部 div 中:

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

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

  #wrapper {
overflow: hidden;
}

这就解决了问题。

小开

我通过使用 overflow-x: hide 解决了这个问题; 如下所示

@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

小开

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

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

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

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

小开

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

林克

小开

为我的引导模式(包含一个表单)修复这个问题的唯一方法是在 CSS 中添加以下代码:

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

在主体内部创建一个站点包装 div 并应用溢出-> x: 隐藏到主体或 html 的包装器 INSTEAD 修复了这个问题。

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

小开

我已经花了几个小时在这个上面，尝试了这个和其他页面的各种组合。最后对我有效的方法是，按照已接受的答案中的建议，创建一个站点包装 div，但是将两个溢出都设置为隐藏，而不仅仅是 x 溢出。如果在滚动时保留 overflow-y，则页面最终只能垂直滚动几个像素，然后停止。

#all-wrapper {
overflow: hidden;
}

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

小开

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

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

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

使用 position: fixed在包装器/div 内部也很好，但是当我有一个菜单，并使用 Javascript 点击动画滚动到一些部分，它不工作。

因此，我决定在主体内部的包装器/div 上使用 touch-action: pan-y pinch-zoom，问题解决了。

小开

解决这个问题最简单的方法就是

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

小开

步骤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;
}

步骤2: 将 css 属性添加到 body 和 html，如下所示:

body, html{
overflow-x:  hidden;
}

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

小开

以下工作

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

解决方案，正常工作的移动设备与灵活的定位顶部:

html,body {
width: 100%;
margin: 0;
padding: 0;
}

以及网页:

  <meta name="viewport" content="width=device-width, user-scalable=0">

不要忘记将这个 css 放置在不同的网页主 div 中:

height : auto !important;
小开

就像这样试一下，你已经添加了溢出-隐藏。

小开

设置溢出-x 为“剪辑”而不是“隐藏”也可以防止不必要的滚动触摸设备，与 wacom 笔，移位滚轮或任何其他编程滚动。不利的一面是，它还阻止了用 javascript 进行编程滚动。

Https://developer.mozilla.org/en-us/docs/web/css/overflow#clip


提交答案