微信body.scrollTop

由于在安卓微信中,目前还不支持bfcache,为了让用户在跳出页面浏览后,返回时能够滚动到list 的滚动位置,需要记录scrollTop值并且还原出来。

有一个分享页面,滚动元素就是整个页面html,在chrome 中开发时,我使用document.documentElement.scrollTop能获取掉有效的滚动偏移,但在微信中无效,调试发现值是0,后来打印了一下body.scrollTop却是有值的。

问了一下chatGPT:

这是由于不同浏览器对于滚动的处理方式存在一些差异。在 Chrome 中,通常使用 document.documentElement.scrollTop 来获取文档的滚动位置,而在一些移动端浏览器(包括微信浏览器)中,可能使用 body.scrollTop 或者 document.body.scrollTop

这些差异主要涉及到浏览器的渲染模型。在标准的文档模式下,Chrome 等现代浏览器使用 document.documentElement 表示整个文档的根元素,而在一些情况下(例如在 Quirks 模式下或者在移动端的某些情况下),可能使用 document.body 或者 body 元素来表示文档的主体。

如果你想确保在不同浏览器中获取滚动位置的一致性,可以使用以下方式:

const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

这样,它会首先尝试使用 window.pageYOffset,如果不可用,就会依次尝试使用 document.documentElement.scrollTopdocument.body.scrollTop,以兼容不同的浏览器。


后来只能换成document.body.scrollTop 来解决问题了,顺便说一下,在微信安卓中,可以使用chrome的chrome://inspect/#devices 调试功能,对于排查问题效率很高。

Leave a Comment

邮箱地址不会被公开。 必填项已用*标注