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標記

回答

相關問題