iOS safari瀏覽器上overflow: scroll元素?zé)o法滾動(dòng)bug深究

Steve_Wang_ 發(fā)布于2019-08-29 16:44 / 1464人閱讀

摘要：前情提要在之前我寫過(guò)一篇文章瀏覽器上元素?zé)o法滑動(dòng)解決方法整理，這篇文章寫的是，當(dāng)瀏覽器上出現(xiàn)大于父容器的元素，想給父容器加上實(shí)現(xiàn)內(nèi)部滾動(dòng)效果而失敗的總結(jié)。解決方法反其道而行之。當(dāng)子元素加載完成時(shí)，將包裹元素?fù)伍_(kāi)，父元素便可以自由滾動(dòng)了。

前情提要

在之前我寫過(guò)一篇文章：iOS safari瀏覽器上overflow: scroll元素?zé)o法滑動(dòng)bug解決方法整理，這篇文章寫的是，當(dāng)iOS safari瀏覽器上出現(xiàn)大于父容器的svg元素，想給父容器加上overflow: scroll實(shí)現(xiàn)內(nèi)部滾動(dòng)效果而失敗的總結(jié)。但當(dāng)時(shí)并沒(méi)有意識(shí)到這個(gè)問(wèn)題的實(shí)際原理，只是知道了safari給scroll元素加入了原生的scrollView塊。

bug原理

最近在做一個(gè)項(xiàng)目的時(shí)候，在safari上遇到了一個(gè)其他的bug，卻讓我意識(shí)到了這個(gè)問(wèn)題的終極原因。

項(xiàng)目bug是這樣的：我在用Nuxt做一個(gè)展示站點(diǎn)，需要使用錨鏈接在頁(yè)面剛進(jìn)入的時(shí)候跳轉(zhuǎn)到某個(gè)位置。這里我本來(lái)使用的是router api提供的scrollBehavior方法，但這個(gè)方法在Nuxt上有局限性。我就把實(shí)現(xiàn)方式改為：進(jìn)入頁(yè)面后，動(dòng)態(tài)計(jì)算不同錨點(diǎn)位置的scroll top再設(shè)置父元素的scroll位置。

在其他瀏覽器上都是ok的，但在safari上就出了問(wèn)題：在頁(yè)面剛進(jìn)入時(shí)無(wú)法正確獲取到元素的scroll top，小很多，只有頁(yè)面加載完成之后才可以。

究其原因，是因?yàn)槲以陧?yè)面上放了很多張圖片讓其自行占位，而在頁(yè)面剛加載時(shí)，其他瀏覽器會(huì)預(yù)先獲取到圖片的大小而給其一個(gè)占位，無(wú)論圖片是否加載完成頁(yè)面總高度固定的。而safari就不一樣，圖片沒(méi)加載成功時(shí)高度是0。

圖片沒(méi)加載成功時(shí)高度是0。哇長(zhǎng)見(jiàn)識(shí)了。

這時(shí)回想到之前在safari上的那個(gè)scroll bug，在查閱相關(guān)資料后就可以得出結(jié)論了：

safari瀏覽器在渲染頁(yè)面元素的時(shí)候，會(huì)預(yù)先走webkit瀏覽器的渲染流程：

構(gòu)建DOM tree

構(gòu)建CSS rule tree

根據(jù)DOM和CSS tree來(lái)構(gòu)建render tree

根據(jù)render tree計(jì)算頁(yè)面的layout

render頁(yè)面

注意在第三步和第四步的時(shí)候，safari瀏覽器在構(gòu)建render tree的時(shí)候，會(huì)預(yù)先找到相應(yīng)的overflow: scroll元素，在計(jì)算頁(yè)面layout的時(shí)候，會(huì)計(jì)算父元素的高度與子元素的高度，若子元素高于父元素，則在render頁(yè)面時(shí)為其建立一個(gè)原生的scrollView。

這個(gè)scrollView有什么用的？其實(shí)就是為了給其一個(gè)彈彈樂(lè)的效果（但確實(shí)用戶體驗(yàn)不錯(cuò)）。

當(dāng)子元素是某個(gè)媒體格式時(shí)，比如img、object（svg）等，safari在加載完成之前是不會(huì)在計(jì)算在layout之內(nèi)的，也就是高度為0，則子元素的高度就一定小于父元素的高度，safari不會(huì)給父元素一個(gè)原生的scrollView。

解決方法

反其道而行之。當(dāng)出現(xiàn)這種問(wèn)題的時(shí)候，給子元素一個(gè)包裹元素，包裹元素設(shè)置一個(gè)min-height大于父元素的高度，讓父元素有scrollView。當(dāng)子元素加載完成時(shí)，將包裹元素?fù)伍_(kāi)，父元素便可以自由滾動(dòng)了。