Question

我们将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如何扩展站点的宽度。

Answer 1

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

Answer 2

在iOS 7.1 / 8.2上使用Mobile Safari进行测试以下代码对我来说既不适合。

html {overflow：hidden; }

我相信它是Mobile Safari的一个错误/功能，其他浏览器，包括OSX上的Safari运行良好。但溢出：隐藏在iPhone / iPad上的工作，如果你也设置位置：固定为HTML元素。像这样：

html {overflow：hidden;位置：固定; }

Answer 3

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

经过多次实验，我发现this answer实际上是唯一可以工作的工具。

但是，它会在所有浏览器中的整个页面上创建一个奇怪的黑条。另外，请勿将单位用于零值。

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

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

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

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

Answer 4

添加html {overflow：hidden;你的CSS应该修复它。

此解决方案对我不起作用。

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

<强> CSS

#wrapper { 
    overflow-x: hidden;
}

<强> HTML

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

Answer 5

在我的情况下，以下确实解决了问题

body, html {
  overflow-x: hidden;
}

Answer 6

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

* {
  touch-action: none;
}

这虽然打破了溢出滚动。这是我的解决方法：

pre {
  overflow-x: scroll;
  touch-action: pan-x;
}

Answer 7

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

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

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

并使用以下方式设计样式：

#wrapper { 
  overflow: hidden 
}

它终于奏效了。

Answer 8

如果是html，正文overflow-x: hidden;无效，请尝试查找text-indent。例如，flexslider的默认设置将一些元素设置为text-indent -9999px。我发现这是重写html溢出规则。

Answer 9

我实际上放弃了IOS Safari中的CSS溢出-x。我改用了脚本

$(window).scroll(function ()
{
    if ($(document).scrollLeft() != 0)
    {
        $(document).scrollLeft(0);
    }
});

移动Safari中忽略了溢出-x值

9 个答案: