亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

IOS safari瀏覽器overflow:scroll無法滑動的bug解決方案

發布時間:2020-08-16 10:03:49 來源:網絡 閱讀:2667 作者:尼羲 欄目:web開發

最近在做一個項目的時候,在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

注意在第三步和第四步的時候,safari瀏覽器在構建render tree的時候,會預先找到相應的overflow: scroll元素,在計算頁面layout的時候,會計算父元素的高度與子元素的高度,若子元素高于父元素,則在render頁面時為其建立一個原生的scrollView。

這個scrollView有什么用的?其實就是為了給其一個彈彈樂的效果(但確實用戶體驗不錯)。

當子元素是某個媒體格式時,比如img、object(svg)等,safari在加載完成之前是不會在計算在layout之內的,也就是高度為0,則子元素的高度就一定小于父元素的高度,safari不會給父元素一個原生的scrollView。

解決辦法

反其道而行之。當出現這種問題的時候,給子元素一個包裹元素,包裹元素設置一個min-height大于父元素的高度,讓父元素有scrollView。當子元素加載完成時,將包裹元素撐開,父元素便可以自由滾動了。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

鲁甸县| 巴塘县| 密山市| 壶关县| 安徽省| 阿克| 林周县| 德安县| 东台市| 错那县| 兴宁市| 山西省| 五莲县| 万宁市| 木兰县| 珠海市| 江津市| 汉源县| 云龙县| 亚东县| 揭阳市| 湘潭县| 乐陵市| 定襄县| 西乌| 台山市| 灵宝市| 三门县| 霍州市| 韩城市| 杨浦区| 工布江达县| 阿鲁科尔沁旗| 安达市| 灵寿县| 乐至县| 巢湖市| 台中市| 穆棱市| 凤阳县| 通山县|