溢出：隐藏在身体上在 ios6 中被破坏

Question

我已经进行了一些测试，据我所知，ios6 上的移动 Safari 存在一个错误。

当在body 标签上添加overflow:hidden 并使用transform:translateX(100%); 将元素移出正文时，它会为该元素创建一个额外的可滚动空间。 在所有桌面浏览器上，它都是“隐藏的”。

这是一个演示：http://jsfiddle.net/mUB5d/1。在 Mobile safari 中打开它，您会看到问题所在。

任何人都可以在 Mac OS 上查看 safari 6 以查看该错误是否也存在？ 除了围绕我的元素创建另一个父级之外，有人知道任何解决方法吗？

感谢您的反馈！

Answer 1

不。 Mac 上的 Safari 6 不存在该错误。滚动条不存在。

我在 OSX Mountain Lion (10.8.2) 上运行它

为了进一步回答您的问题，发生这种情况的原因可能更多地与 Mobile Safari 的缩放渲染有关，而不是溢出隐藏错误。该元素实际上被隐藏在屏幕外（请注意下方我一直向右滚动的位置，它仍然没有向我显示完整的 100% 宽度元素 - 实际上它的 90% 被隐藏了。

这可能与 iframe 和页面缩放有关。不过看起来仍然像一个错误。

我假设您是在 JSFiddle 中通过一个真实的示例进行演示。如果您回到现实生活中的示例（除了 iframe 领域），如果您还没有此元标记，请尝试将它添加到头部，看看这会有所帮助：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

这是 iOS 上的正常行为（仅限 iOS）。您可以通过在 html 和 body 元素上声明 overflow: hidden 来解决它。此外，您应该将正文设置为position: relative。

溢出行为

这里有几件事在起作用。要了解修复工作的原因，我们首先需要看看视口的溢出是如何设置的。

• 视口的溢出由html元素的溢出设置决定。
• 但只要将html 元素的溢出保留为默认值(visible)，主体的溢出设置也会应用于视口。即，当您定位视口时，您可以将html 或body 设置为overflow: hidden。到目前为止，body 元素本身的溢出行为不受影响。
• 现在，如果您将html 元素的溢出设置为visible 以外的任何值，则不会再发生从body 到视口的传输。在您的特定情况下，如果将两个溢出都设置为 hidden，html 元素的设置将应用于视口，body 元素也会隐藏其溢出。

这实际上是每一个相当现代的浏览器的情况，而不是特定于 iOS。

iOS 怪癖

现在，iOS 会忽略视口上的 overflow: hidden。无论您在 CSS 中声明什么，浏览器都保留将内容作为一个整体显示的权利。这是故意的，而不是错误，在 iOS 7 和 8 中仍然如此。任何人都无能为力 - 它无法关闭。

但是您可以通过使主体元素本身而不是视口隐藏其溢出来解决它。要做到这一点，您必须首先将html 元素的溢出设置为visible 以外的任何内容，例如到auto 或hidden（在iOS 中，两者没有区别）。这样，当您将其设置为 overflow: hidden 时，body 溢出设置不会转移到视口，而是实际上粘在 body 元素上。

有了这个，大部分内容都被隐藏了。但是仍然有一个例外：绝对定位的元素。它们的最终偏移父对象是视口，而不是主体。如果它们位于屏幕外、右侧或底部的某个位置，您仍然可以滚动到它们。为了防止这种情况，您可以简单地将 body 元素设置为 position: relative，这使其成为定位内容的偏移父级，并防止这些元素脱离 body 框。

用代码回答

最后要注意一个问题：主体本身不能大于视口。

所以body需要设置为视口宽度和高度的100%。 （实现它的纯 CSS 方法的功劳归于 this SO answer。）html 和 body 元素的边距必须为 0，html 也不能有填充或边框。

最后，为了处理 body padding，如果您想在 body 上设置边框，请使用 box-sizing: border-box 为 body 进行数学运算。

就这样吧。

html {
  overflow: hidden;

  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  overflow: hidden;
  position: relative;

  box-sizing: border-box;
  margin: 0;
  height: 100%;
}

NB 你可以随意设置body padding和border。

Answer 3

经过一段时间的努力，我发现html 和body 标签都需要隐藏溢出才能真正隐藏溢出的内容。 body 内的元素溢出隐藏工作正常，所以我们的选择是额外的 css 规则或包装元素。

Answer 4

对我来说很有效

I have implemented in the left side menu

if($('.left-menu-panel').is(':visible')) {$("body").addClass('left-menu-open');$("html").css('overflow-y','hidden'); $('body').click(function() {$("body").removeClass("left-menu-open") ;$("html").css('overflow-y','visible'); });$('#off-canvas-left').click(function(event){event.stopPropagation();}); }