安卓微信浏览器scrollTop

前阵子在公司实现一个常见的需求，就是添加一个返回顶部的按钮，当滑动网页到一定程度后会出现这个按钮，需要获取到元素的滚动高度scrollTop。结果在pc端的浏览器可以生效，pc端浏览器中的移动端模式可以生效，在苹果手机上的微信浏览器也可以生效，唯独在安卓手机的微信浏览器不能生效。先展示一下核心代码：

// 用vue写的项目，scrollToTop控制按钮显示与否，当滚动高度大于1000像素就出现按钮
handleScroll () {let scrollTop = document.documentElement.scrollTopif (scrollTop > 1000) {this.scrollToTop = true} else {this.scrollToTop = false}
}

后来发现在安卓手机的微信浏览器中scrollTop的值是0，上网查了一下，解决办法是针对不同的浏览器需要做一个兼容处理：

handleScroll () {let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTopif (scrollTop > 1000) {this.scrollToTop = true} else {this.scrollToTop = false}
}

解决是解决了，但是为什么呢？这几个写法有什么区别呢？

document.documentElement在页面具有DTD，或者说指定了DOCTYPE 时可以使用，即可以取到scrollTop的值；
document.body在页面不具有DTD，或者说没有指定了DOCTYPE时使用；
window.pageYOffset表示当前文档从窗口左上角垂直滚动的像素数。

以后遇到这种类型的兼容性问题一般这样处理就行了。

安卓微信浏览器scrollTop相关推荐

解决安卓微信浏览器中location.reload 或者 location.href失效的问题
解决安卓微信浏览器中location.reload 或者 location.href失效的问题参考文章: (1)解决安卓微信浏览器中location.reload 或者 location.href失 ...
安卓微信浏览器使用input file图片上传无法触发change事件
问题现象项目中遇到一个上传图片的功能,使用了file作为选择上传,需要做图片预览等功能.在多方测试后没有问题,但在安卓微信浏览器中却发现change事件失效无法触发. 解决办法由于在项目中我是用来 ...
安卓微信浏览器无法支持input multiple的h5属性多图上传
H5手机端实现多图上传的功能但是实际上安卓手机上只能义词上传一张图片(测试的机型:小米)代码如下: 在微信开发中遇见一个问题应用上传插件安卓手机无法进行多张上传当时现象: 微信浏览器选择安卓 ...
安卓微信浏览器唤起系统内部浏览器
安卓微信浏览器唤起系统内部浏览器最近因为公司项目需求,需要做一个功能.使用微信浏览器打开高德地图导航,经试验,高德web端没有导航功能,其实现原理是调起高德APP来实现导航的操作.然后把代码写进微 ...
安卓微信浏览器返回上一页默认读取缓存解决方案
安卓微信浏览器返回上一页默认读取缓存解决方案参考文章: (1)安卓微信浏览器返回上一页默认读取缓存解决方案 (2)https://www.cnblogs.com/AlexBlogs/p/577727 ...
关于安卓微信浏览器中scrollTop的问题
前阵子在公司实现一个常见的需求,就是添加一个返回顶部的按钮,当滑动网页到一定程度后会出现这个按钮,需要获取到元素的滚动高度scrollTop.结果在pc端的浏览器可以生效,pc端浏览器中的移动端模式可 ...
Android微信页面缓存清理,安卓微信浏览器缓存如何清理
前言: 缓存这个问题的出现,真真切切的感受到微信浏览器这鬼东西对前端程序员充满了恶意,捋捋自己的发型,甚是恐慌(顿时有种想转php的冲动,有木有). 解决方案: 出现缓存问题导致用户出现很多车祸现场( ...
android发送微信请求失败,安卓微信浏览器POST请求发不出去。
post请求在微信内置浏览器里发不出去,在PC上.IOS微信内置浏览器.IOS的safari浏览器.安卓默认浏览器都可以成功发出. 测试地址:http://jx-test-agent.yaojiqip ...
Android上传文件到服务器500,使用WebUploader解决安卓微信浏览器上传图片中遇到的bug...
摘自个人博客:走啊走的记录,欢迎点击查看,效果更佳! 微信浏览器上传图片bug的原因微信在新版本中采用的是自己的X5内核浏览器,而在较老的版本中还有可能是安卓的原生浏览器.具体的环境我也不太了解,但 ...

安卓微信浏览器scrollTop

安卓微信浏览器scrollTop相关推荐

最新文章

热门文章