華為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和scrollY
• WebKit Bugzilla - Bug 106133: document.body.scrollTop & document.documentElement.scrollTop differ cross-browser
• WebKit Bugzilla - Bug 5991: [CSSOM View] Implement standard behavior for scroll(Left/Top/Width/Height/To/By/ingElement)