关于安卓微信浏览器中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失 ...
安卓微信浏览器scrollTop
前阵子在公司实现一个常见的需求,就是添加一个返回顶部的按钮,当滑动网页到一定程度后会出现这个按钮,需要获取到元素的滚动高度scrollTop.结果在pc端的浏览器可以生效,pc端浏览器中的移动端模式可 ...
安卓微信浏览器使用input file图片上传无法触发change事件
问题现象项目中遇到一个上传图片的功能,使用了file作为选择上传,需要做图片预览等功能.在多方测试后没有问题,但在安卓微信浏览器中却发现change事件失效无法触发. 解决办法由于在项目中我是用来 ...
关于安卓手机在微信浏览器中无法调起相机的原因
最近功在做公司的一个项目,遇到安卓手机在微信浏览器中更换头像无法调起相机的问题,特来此记录一下. 1.微信没有相机权限,开启就行了. 2.〈input type="file" ac ...
微信浏览器中进行支付宝支付
B端项目使用的是支付宝手机网页支付,微信浏览器中屏蔽了支付宝的功能.上有政策下有对策,支付宝也有应对的办法,下来就来说一说支付宝手机网站支付. 第一步:开发准备工作登录支付宝平台(需要实名认证的支付 ...
安卓微信浏览器无法支持input multiple的h5属性多图上传
H5手机端实现多图上传的功能但是实际上安卓手机上只能义词上传一张图片(测试的机型:小米)代码如下: 在微信开发中遇见一个问题应用上传插件安卓手机无法进行多张上传当时现象: 微信浏览器选择安卓 ...
安卓微信浏览器唤起系统内部浏览器
安卓微信浏览器唤起系统内部浏览器最近因为公司项目需求,需要做一个功能.使用微信浏览器打开高德地图导航,经试验,高德web端没有导航功能,其实现原理是调起高德APP来实现导航的操作.然后把代码写进微 ...
H5网站-微信浏览器中打开底部fixed遮住内容区域问题
其他安卓浏览器都没问题,在微信浏览器中会出现这种情况,是因为fixed兼容性问题造成,但是此时absolute并不能满足需求,故使用如下方式解决: <div> <div class= ...
uni-app：处理微信浏览器中授权微信登录后，无法正常回退问题
一.情景在微信浏览器中,需要使用用户微信的code数据,因此采用了"location.href"获取微信授权信息的方式来实现授权登录,并且在重定向页面中获取code,完成操作后需 ...

关于安卓微信浏览器中scrollTop的问题

关于安卓微信浏览器中scrollTop的问题相关推荐

最新文章

热门文章