資訊專欄INFORMATION COLUMN
摘要：前情提要在之前我寫過一篇文章瀏覽器上元素無法滑動解決方法整理，這篇文章寫的是，當瀏覽器上出現大于父容器的元素，想給父容器加上實現內部滾動效果而失敗的總結。解決方法反其道而行之。當子元素加載完成時，將包裹元素撐開，父元素便可以自由滾動了。
前情提要
在之前我寫過一篇文章：iOS safari瀏覽器上overflow: scroll元素無法滑動bug解決方法整理，這篇文章寫的是，當iOS safari瀏覽器上出現大于父容器的svg元素，想給父容器加上overflow: scroll實現內部滾動效果而失敗的總結。但當時并沒有意識到這個問題的實際原理，只是知道了safari給scroll元素加入了原生的scrollView塊。
bug原理最近在做一個項目的時候，在safari上遇到了一個其他的bug，卻讓我意識到了這個問題的終極原因。
項目bug是這樣的：我在用Nuxt做一個展示站點，需要使用錨鏈接在頁面剛進入的時候跳轉到某個位置。這里我本來使用的是router api提供的scrollBehavior方法，但這個方法在Nuxt上有局限性。我就把實現方式改為：進入頁面后，動態計算不同錨點位置的scroll top再設置父元素的scroll位置。
在其他瀏覽器上都是ok的，但在safari上就出了問題：在頁面剛進入時無法正確獲取到元素的scroll top，小很多，只有頁面加載完成之后才可以。
究其原因，是因為我在頁面上放了很多張圖片讓其自行占位，而在頁面剛加載時，其他瀏覽器會預先獲取到圖片的大小而給其一個占位，無論圖片是否加載完成頁面總高度固定的。而safari就不一樣，圖片沒加載成功時高度是0。
圖片沒加載成功時高度是0。哇長見識了。
這時回想到之前在safari上的那個scroll bug，在查閱相關資料后就可以得出結論了：
safari瀏覽器在渲染頁面元素的時候，會預先走webkit瀏覽器的渲染流程：
構建DOM tree
構建CSS rule tree
根據DOM和CSS tree來構建render tree
根據render tree計算頁面的layout
render頁面
注意在第三步和第四步的時候，safari瀏覽器在構建render tree的時候，會預先找到相應的overflow: scroll元素，在計算頁面layout的時候，會計算父元素的高度與子元素的高度，若子元素高于父元素，則在render頁面時為其建立一個原生的scrollView。
這個scrollView有什么用的？其實就是為了給其一個彈彈樂的效果（但確實用戶體驗不錯）。
當子元素是某個媒體格式時，比如img、object（svg）等，safari在加載完成之前是不會在計算在layout之內的，也就是高度為0，則子元素的高度就一定小于父元素的高度，safari不會給父元素一個原生的scrollView。
解決方法反其道而行之。當出現這種問題的時候，給子元素一個包裹元素，包裹元素設置一個min-height大于父元素的高度，讓父元素有scrollView。當子元素加載完成時，將包裹元素撐開，父元素便可以自由滾動了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97805.html
摘要：前情提要在之前我寫過一篇文章瀏覽器上元素無法滑動解決方法整理，這篇文章寫的是，當瀏覽器上出現大于父容器的元素，想給父容器加上實現內部滾動效果而失敗的總結。解決方法反其道而行之。當子元素加載完成時，將包裹元素撐開，父元素便可以自由滾動了。 前情提要 在之前我寫過一篇文章：iOS safari瀏覽器上overflow: scroll元素無法滑動bug解決方法整理，這篇文章寫的是，當iOS ...
摘要：而中的網頁本身就是一個大的，在脫離文檔流的定位時，子元素的高度如果沒有在建立之前確定，就不會觸發內部滑動，而會觸發外部滑動。分析父元素不脫離文檔流時，無此。更新此問題的深層原因找到了，詳情請見瀏覽器上元素無法滾動深究 描述 此bug出現需要條件：父元素需使用絕對定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scr...
摘要：而中的網頁本身就是一個大的，在脫離文檔流的定位時，子元素的高度如果沒有在建立之前確定，就不會觸發內部滑動，而會觸發外部滑動。分析父元素不脫離文檔流時，無此。更新此問題的深層原因找到了，詳情請見瀏覽器上元素無法滾動深究 描述 此bug出現需要條件：父元素需使用絕對定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scr...
摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現點擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發對于文件的處理問題。解決方法有給元素設置絕對定位即可。元素換成內聯元素，如。 一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...
摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現點擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發對于文件的處理問題。解決方法有給元素設置絕對定位即可。元素換成內聯元素，如。 一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...
閱讀 4510·2021-09-22 14:57
閱讀 555·2019-08-30 15:56
閱讀 2658·2019-08-30 15:53
閱讀 2234·2019-08-29 14:15
閱讀 1684·2019-08-28 17:54
閱讀 553·2019-08-26 13:37
閱讀 3471·2019-08-26 10:57
閱讀 1040·2019-08-26 10:32
