9

我们在 body 和可滚动元素上将 overflow-x 值设置为隐藏，但移动版 Safari 会忽略这些值。在桌面上，溢出值工作正常。

相关代码：

body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); }

.page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch }

#catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; }

catalog_page 是位于视口之外的内容，只有在有人做出手势后才会滑入视图。

重现：

1)在您的 iPhone（不是 iPad）上访问www.tekiki.com 。向右滚动，您将看到 catalog_page 如何扩展站点的宽度，即使我们固定了正文宽度。

4

10 回答 10

14

添加html { overflow: hidden; }到您的 CSS 中，它应该可以修复它。

于 2013-07-20T22:40:46.770 回答
4

在 iOS 7.1/8.2 上使用 Mobile Safari 测试以下代码对我也不起作用。

html {溢出：隐藏；}

我相信这是 Mobile Safari 的错误/功能，其他浏览器，包括 OSX 上的 Safari 运行良好。但是如果您还将 position:fixed 设置为 HTML 元素，overflow:hidden 可以在 iPhone/iPad 上使用。像这样：

html {溢出：隐藏；位置：固定；}

于 2015-03-28T16:57:07.520 回答
4

现在是 2020 年，但我仍在努力寻找答案。

经过多次实验，我发现这个答案实际上是唯一有效的答案。

但是，它确实在所有浏览器中的整个页面上创建了一个奇怪的黑条。此外，您不应将单位用于零值。

因此，我的最终解决方案是：（任何转换函数都可以解决问题，只要记住设置零值。）

html, body {
    ... (font, background, stuff)

    overflow-x: hidden;
    /* Safari compatibility */
    height: 100%;
    width: 100%;
    transform: translate3d(0,0,0);
}

请注意，此解决方案可能会影响您的导航。“位置：固定；” 由于“转换”属性设置了“无”以外的其他内容，因此不适用于儿童 https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

于 2020-04-25T00:14:54.883 回答
2

添加 html { 溢出：隐藏；} 到你的 CSS，它应该修复它。

这个解决方案对我不起作用。

相反，我在正文中创建了一个包装器 div 并将 overflow-x:hidden 应用于包装器：

CSS

#wrapper { 
    overflow-x: hidden;
}

html

<html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>
于 2014-12-10T22:20:18.527 回答
1

我有以下代码来禁用双击缩放：

* {
  touch-action: none;
}

这打破了溢出滚动。这是我修复它的方法：

pre {
  overflow-x: scroll;
  touch-action: pan-x;
}
于 2020-04-03T23:22:35.773 回答
1

就我而言，以下确实解决了问题

body, html {
  overflow-x: hidden;
}
于 2016-08-05T09:38:21.837 回答
0

我实际上放弃了 IOS safari 中的 css overflow-x。我改用脚本

$(window).scroll(function ()
{
    if ($(document).scrollLeft() != 0)
    {
        $(document).scrollLeft(0);
    }
});
于 2020-05-16T14:51:56.133 回答
0

现在是 2022 年。移动 safari 仍然很古怪。但对我来说，让overflow-x 在身体上工作的方法似乎是执行以下操作：

html,
body {
  height: 100%;
  overflow-x: hidden;
  transform: translate3d(0, 0, 0);
}

我希望我理解转换，但这似乎是必要的。另一种方法是将身体设置为相对位置，但这似乎更安全。

或者

另一种绝对安全且面向未来的方法是将 body 中的所有内容直接放入 div 中，并让该 div 溢出 hidden 并确保其最小高度为 100vh。像这样：

<body>
  <div class="page">
    everything...
  </div>
</body>

然后在 CSS 中：

.page {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}
于 2022-02-07T22:50:59.913 回答
0

如果 html, bodyoverflow-x: hidden;不适合你尝试寻找文本缩进。例如，flexslider 的默认设置将一些元素设置为text-indent -9999px. 我发现这是覆盖 html 溢出规则。

于 2017-12-07T00:34:04.130 回答
0

为了解决旧设备（iphone 3）上的问题，我不得不混合解决方案，因为它们不能单独工作。

我最终在 html 正文中添加了一个包装器 div：

<html>
  <body>
    <div id="wrapper">....</div>
  </body>
</html>

并使用以下样式对其进行样式设置：

#wrapper { 
  overflow: hidden 
}

它终于奏效了。

于 2015-10-16T09:07:25.327 回答