iPhone Safari滚动超出html标记

我一直在努力学校的移动网站，并且我似乎遇到了移动Safari中的滚动问题。如果您在iPhone上访问www.caj.or.jp，它将滚动浏览页面底部，偶尔会在蓝色背景下隐藏某些页面内容。使用Safari检查器，似乎我滚动过<html>标记。但是这是当Safari滚动条出现时。滚动条在上方滚动时不会闪烁，只有在经过页面末尾时才会闪烁。任何帮助，将不胜感激。iPhone Safari滚动超出html标记

来源

2015-07-20 naterudd

你为什么不删除属性'溢出-X：隐藏;'从'html'标签？ –

谢谢，那是原因。现在，我必须找到另一种方法来防止他们横向滚动，否则我必须允许它。编辑：它看起来像在我的'＃pageContainer' div上放置'overflow-x：hidden'将会诀窍。 – naterudd

快速解决问题的方法是添加这个CSS：

body { 
    position:relative; 
}

我可以解释“什么”正在发生的事情，但它似乎是一个非常特殊的情况和我的解释“为什么”是发生的可能并不确切。希望有人能够在评论中解释它或纠正我。

所以“发生了什么”？

首先，它可以更容易理解在Windows上使用此屏幕截图所发生的情况，因为滚动条总是可见的。您会看到窗口有一个滚动条，并且它内部是带滚动条的另一个元素。这个内在元素确实是<html>，因为它有一个height: 100%（就像<body>）。所以，正如你所说的，在“下面”有一些东西将一个滚动条添加到窗口。

Browser preview which shows the two scrollbars

这造反元件是<div class="ma-container">。它位于页面的底部，在<html>的内容下面。它有一个position: absolute但没有任何框偏移（顶部，左侧，底部或右侧属性）。如果某个元素没有任何方块偏移量，则浏览器会将其定位在position: static（默认定位）的位置，但仍然会从正常的页面流中移除。

重要的是它将被定位在与其最近的“位置块”相关，即具有非静态位置值的第一父母。如果没有父母是定位块，那么“初始包含块”（看起来像<html>的父亲）将成为定位块。

所以，如果我们总结一下在你的情况发生了什么：因为.ma-container有一个绝对位置，但没有一个盒子偏移量（顶部，左边，...），浏览器确定元素将在哪里有一个position: static，然后将其定位为“相对”“初始包含块”。在这种情况下，div应该是“初始包含块”顶部的1298个像素。所以浏览器将它定位在那里，因为这个元素缩小了100％的高度。

所以要解决您的问题，只需将<body>定位元素和div将被定位在滚动<body>内。

我希望这可以帮助你莫名其妙。

（只是为了其它附加信息，请参阅本文来了解到底为什么html和body有一个滚动条，就像如果他们有一个隐含的overflow-y: auto：CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue）

来源

2015-07-20 04:09:25 Xavier

非常感谢@Xavier。你的彻底解释是非常有帮助的。在@CaioTarifa的帮助下，我从'html'标签中删除了'overflow-x：hidden'后，我仍然有些失望，滚动条仍然没有显示出来。现在将'position：relative'添加到'body'标签后，滚动条会恢复。在我们购买了我们的搜索引擎之后，我对我们页面中的'.ma-container'除外并不满意，这为我改善了这种情况。现在我已经离开'.ma-container'没有偏移了。再次感谢你的帮助。 – naterudd

iPhone Safari滚动超出html标记

回答

相关问题