华为Mate9的默认scrollTop高度

运行环境

• device name: HUAWEI Mate 9
• OS: Android 7.0 & EMUI 5.0.1
• 微信 version: 6.5.22
• ENV: vue、keep-alive

问题描述

• >>故障复现视频地址
• 在华为Mate9的微信内：
  • 向上滑动网页后，跳转页面会有一个默认的滚动条高度（很奇怪为什么会这样？？谁能告诉我）
  • document.compatMode输出为CSS1Compat'，'标准模式；但却表现为混杂模式，document.documentElement.scrollTop值恒为0

1.png

预期

• 页面加载完成时，清除 Mate9 的默认滚动条高度

• 标准模式：document.compatMode值为CSS1Compat
• 混杂模式/怪异模式：未定义doctype文档头，document.compatMode值为BackCompat

以下摘自 W3Help 的说明

• 在混杂模式下，由于所有浏览器均使用 document.body.scrollTop 获取页面的垂直滚动条的位置，所以不会出现兼容性问题。
• 而在标准模式下，由于 Chrome 与 Safari 仍然使用 document.body.scrollTop，而对于 document.documentElement.scrollTop 返回为 0。这时如果仅仅使用 document.documentElement.scrollTop 获取页面垂直滚动条顶端位置，则在 Chrome 和 Safari 中就会因为永久返回 0 导致页面运行异常

• 也就是，对Webkit，无论是混杂模式还是标准模式，都认为滚动元素是body；其他浏览器在标准模式下则是HTML;
• 我目前使用的，PC端：Chrome 62[Blink] 已经支持标准模式；移动端：iOS 10 不支持标准模式。

3.png

方案

• 其实就是为了把 Mate9 默认的滚动条高度给清除掉（为什么存在这个啊？？）
• 目前只在 Mate9 上面复现了这个默认scrollTop的问题
• 代码就这样

setTimeout(() => {
  document.documentElement.scrollTop = 0
  document.body.scrollTop = 0
}, 0)

参考链接

• W3Help - 各浏览器对于获取文档水平及垂直方向滚动条位置（scrollLeft、scrollTop）时的参考元素存在差异
• Chrome 中 scrollingElement 的变化
• 关于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)