華為Mate9的默認(rèn)scrollTop高度
運(yùn)行環(huán)境
- device name:
HUAWEI Mate 9 - OS:
Android 7.0&EMUI 5.0.1 - 微信 version:
6.5.22 - ENV:
vue、keep-alive
問(wèn)題描述
- >>故障復(fù)現(xiàn)視頻地址
- 在華為Mate9的微信內(nèi)：
- 向上滑動(dòng)網(wǎng)頁(yè)后测秸，跳轉(zhuǎn)頁(yè)面會(huì)有一個(gè)默認(rèn)的滾動(dòng)條高度（很奇怪為什么會(huì)這樣娃承？懦窘？誰(shuí)能告訴我）
-
document.compatMode輸出為CSS1Compat'火焰，'標(biāo)準(zhǔn)模式；但卻表現(xiàn)為混雜模式卖局，document.documentElement.scrollTop值恒為0
1.png
預(yù)期
- 頁(yè)面加載完成時(shí)拒秘，清除 Mate9 的默認(rèn)滾動(dòng)條高度
-
標(biāo)準(zhǔn)模式：
document.compatMode值為CSS1Compat -
混雜模式/怪異模式：未定義doctype文檔頭，
document.compatMode值為BackCompat
以下摘自 W3Help 的說(shuō)明
- 在混雜模式下跨细，由于所有瀏覽器均使用 document.body.scrollTop 獲取頁(yè)面的垂直滾動(dòng)條的位置鹦倚，所以不會(huì)出現(xiàn)兼容性問(wèn)題。
- 而在標(biāo)準(zhǔn)模式下冀惭，由于 Chrome 與 Safari 仍然使用 document.body.scrollTop震叙，而對(duì)于 document.documentElement.scrollTop 返回為 0掀鹅。這時(shí)如果僅僅使用 document.documentElement.scrollTop 獲取頁(yè)面垂直滾動(dòng)條頂端位置，則在 Chrome 和 Safari 中就會(huì)因?yàn)橛谰梅祷?0 導(dǎo)致頁(yè)面運(yùn)行異常
- 也就是媒楼，對(duì)Webkit乐尊，無(wú)論是
混雜模式還是標(biāo)準(zhǔn)模式，都認(rèn)為滾動(dòng)元素是body划址；其他瀏覽器在標(biāo)準(zhǔn)模式下則是HTML; - 我目前使用的科吭，PC端：Chrome 62[Blink] 已經(jīng)支持標(biāo)準(zhǔn)模式；移動(dòng)端：iOS 10 不支持標(biāo)準(zhǔn)模式猴鲫。
3.png
方案
- 其實(shí)就是為了把 Mate9 默認(rèn)的滾動(dòng)條高度給清除掉（為什么存在這個(gè)岸匀恕？拂共？）
- 目前只在 Mate9 上面復(fù)現(xiàn)了這個(gè)
默認(rèn)scrollTop的問(wèn)題 - 代碼就這樣
setTimeout(() => {
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
}, 0)
參考鏈接
W3Help - 各瀏覽器對(duì)于獲取文檔水平及垂直方向滾動(dòng)條位置（scrollLeft牺弄、scrollTop）時(shí)的參考元素存在差異Chrome 中 scrollingElement 的變化關(guān)于pageYOffset、scrollTop和scrollYWebKit Bugzilla - Bug 106133: document.body.scrollTop & document.documentElement.scrollTop differ cross-browserWebKit Bugzilla - Bug 5991: [CSSOM View] Implement standard behavior for scroll(Left/Top/Width/Height/To/By/ingElement)
