overflow-x:隐藏在iPhone上不起作用

时间:2014-04-25 12:21:33

标签: html ios css iphone browser

我正在尝试在iPhone / Android设备上创建一个感觉像本机应用的网站。 我已设法将其设置为html和body不滚动,我有一个内容<div>,这是可滚动的部分。

但是,设置

overflow-x:hidden

只允许垂直滚动我仍然在iPhone(Chrome和Safari)上获得水平滚动行为。您可以看到滚动条属于.content元素。设置

overflow:hidden

按预期工作并禁用所有滚动。

对我来说,它看起来像Chrome上的一个错误。

代码:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.content {
    height: 2000px;
    margin: 10px;
    overflow-x: hidden;
    background: linear-gradient(to bottom, #f00 0%, #00f 50%);
}
</style>
</head>
<body>
<div class="scroll">
  <div class="scroll">
    <div class="content">
      <div style="height: 20px; width: 1000px; background: black;"></div>
    </div>
  </div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分:4)

您是否有理由使用单独的元素滚动而不让html元素执行此操作?

我发现手机在不使用html元素作为滚动时可能非常有气质,实际上一些较旧的Android平台会拒绝滚动,如果它不在html元素上(虽然我意识到你指定的只是iOS中的问题)。

关于你的实际问题,我认为这是因为同一元素上存在冲突溢出。

overflow-y: auto;
overflow-x: hidden;

您可能希望有一个元素执行overflow-x,然后将其放在另一个处理滚动的元素内。

aka:将.content元素设为max-width: 100%;并提取重复的.scroll元素

答案 1 :(得分:0)

在iOS 10.3.3:html上,body {overflow-x:hidden}完美无缺。