Question

我正在尝试在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>

Answer 1

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

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

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

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

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

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

Answer 2

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

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

2 个答案: