前阵子在公司实现一个常见的需求,就是添加一个返回顶部的按钮,当滑动网页到一定程度后会出现这个按钮,需要获取到元素的滚动高度scrollTop
。结果在pc端的浏览器可以生效,pc端浏览器中的移动端模式可以生效,在苹果手机上的微信浏览器也可以生效,唯独在安卓手机的微信浏览器不能生效。先展示一下核心代码:
// 用vue写的项目,scrollToTop控制按钮显示与否,当滚动高度大于1000像素就出现按钮 handleScroll () { let
scrollTop= document.documentElement.scrollTop if (scrollTop > 1000) { this.
scrollToTop= true } else { this.scrollToTop = false } }
后来发现在安卓手机的微信浏览器中scrollTop的值是0,上网查了一下,解决办法是针对不同的浏览器需要做一个兼容处理:
handleScroll () { let scrollTop = document.documentElement.scrollTop || window.
pageYOffset|| document.body.scrollTop if (scrollTop > 1000) { this.scrollToTop =
true } else { this.scrollToTop = false } }
解决是解决了,但是为什么呢?这几个写法有什么区别呢?

* document.documentElement在页面具有DTD,或者说指定了DOCTYPE 时可以使用,即可以取到scrollTop的值;
* document.body在页面不具有DTD,或者说没有指定了DOCTYPE时使用;
* window.pageYOffset表示当前文档从窗口左上角垂直滚动的像素数。
以后遇到这种类型的兼容性问题一般这样处理就行了。

技术
今日推荐
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信