在移动Safari上防止水平滚动，使用overflow-x:hidden会破坏网站。

Question

在移动Safari上防止水平滚动，使用overflow-x:hidden会破坏网站。

4

我希望在移动safari上防止我的作品集网站出现水平滚动条。该设计包括内容div，这些内容div在屏幕外，直到用户点击菜单项后它们才会过渡到屏幕上。这在桌面上运行良好，但在移动设备上会留下大量额外的空白空间，用户可以向水平方向滚动。

我已经使用了这个视口标签 <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />

我尝试使用媒体查询和overflow-x:hidden，但都没有成功。当我将overflow-x:hidden添加到html或body标记时，什么也没有发生，但是当我将其添加到html和body标记时，网站就会崩溃，并在标题附近放置一个滚动条。我已经搜索了其他解决方案，但迄今为止还没有找到任何有用的东西。这是因为我故意将内容放在屏幕外吗？

非常感谢您能提供的任何帮助！

这里是内容区域的CSS：

.web {
width: 953px;
height: 150px;
position: absolute;
margin-top:40px;
margin-left:0px;
z-index:1;opacity:0;
padding:7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
-webkit-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-moz-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-o-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-ms-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
}
.video {
width: 953px;
height: 150px;
position: absolute;
margin-top:40px;
margin-left:0px;
z-index:500;
overflow:hidden;
opacity:0;
padding:7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
-webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-moz-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-o-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-ms-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
 transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
}
.about {
width: 953px;
height: auto !important;
position: absolute;
margin-top:40px;
z-index:9000;
opacity:0;
padding:7px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
  -webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -moz-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -o-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -ms-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
    transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear,            margin-top 1.5s ease, margin-left 0.9s ease;  

/*Classes that Div's take once clicked*/
.prime{
width: 953px;
height: 750px;
background:rgba(255,255,255,.9);
margin-left:0px;
position: absolute;
margin-top:75px;
z-index:9001;
opacity:1;
overflow:auto;   
}

.third{
 width: 953px;
height: 200px;
opacity: 0.0 !important;
position: absolute;
margin-top:-499px;
margin-left:1810px;
z-index:1;
overflow:hidden;  
}

.secondary{
width: 953px;
height: 200px;
opacity: 0 !important;
position: absolute;
margin-top:499px;
margin-left:-1810px;
z-index:500;
overflow:hidden;   
}

- Rob

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Toni Leigh · Accepted Answer

我刚刚通过使用媒体查询，在元素加载到小屏幕上时将overflow:hidden设置为解决了类似的问题。

所以在我的css中：

- 在等待滑动的所有内容的div上，overflow:visible - 在html标签上，overflow-x:hidden，以消除由于内容宽度而创建的横向滚动条 - 如果屏幕很小，则使用媒体查询将overflow:hidden设置为内容div

从用户角度考虑，当屏幕大于1024px时，他们将受益于准备从任一侧滑入屏幕的内容的额外视觉影响，但在1024px或更小的960px宽站点上查看时，由于内容基本上是不可见的，因此这种影响将会丢失。

html
{
    overflow-x:hidden;
}

@media only screen and (max-width: 1024px)
{
    overflowing_content_div { overflow:hidden; }
}

可能有一种不那么hacky的解决方案，而且这种方案足以应对比1024px更高的移动设备屏幕分辨率，如果有的话，我想听听，并希望将其选为主要答案。