溢出-x：隐藏在 iPhone 上不起作用答案

【问题标题】：overflow-x:hidden not working on iPhone溢出-x：隐藏在 iPhone 上不起作用
【发布时间】：2014-04-25 12:21:33
【问题描述】：

我正在尝试创建一个在 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>

【问题讨论】：

标签： html ios css iphone browser

【解决方案1】：

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

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

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

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

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

又名：给你的.content 元素一个max-width: 100%; 并取出重复的.scroll 元素

【讨论】：

不使用 HTML 滚动，所以我可以有固定（或绝对）定位的元素，这些元素根本不移动（甚至最后没有反弹），所以它看起来像一个原生应用程序。跨度>
在某些情况下使用 2 个元素是个好主意。我会记住对那些人的这个建议。就我而言，这有点困难，因为内容可能比屏幕宽（我有一个滑入/滑出的元素）。虽然这对我来说仍然是一个错误。
@Yaron 我遇到了类似的问题，我必须使用 jQuery 将 overflow-x 属性绑定到 <html> 元素，然后它才能在移动设备上按预期工作。不确定这是否对您有帮助。
@Brendan，不确定我是否关注。你究竟是如何将它绑定到什么的，这会影响文档中的其他 div 吗？也许小提琴或代码示例会有所帮助:)
除了将overflow: hidden添加到html, body之外，我还必须添加position: relative

【解决方案2】：

在 iOS 10.3.3 上：html, body { overflow-x: hidden } 完美运行。

【讨论】：

【解决方案3】：

.class-name{
     overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。