vue项目中,获取TMD页面卷进去的高度总失败,比如:
let top = document.documentElement.scrollTop || document.body.scrollTop;
console.log(top)// 0;
沃特法克,放在原生写法里,该是多少就打印多少;
于是乎,打印了一下window对象。发现有个window.pageYOffset 属性,以前没见过啊。后来验证才知道,也是页面卷进去的纵向距离,即高度(Y轴);
如上 即为 卷入的X 轴 Y轴距离;
考虑到PC端或者移动端,浏览器无非就是QQ浏览器,360,猎豹,火狐,谷歌等等,所以加入了兼容写法:
-
//兼容的获取页面卷进去的宽高
-
function getScroll () {
-
return {
-
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
-
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
-
}
-
}
可以将函数注册到组件中的自定义方法里,也可以绑定到vue的原型上,这样就变成了共享的方法,或者新建一个js并引入使用,都可以.
取值的话 就是getScroll().left 或getScroll().top 即可得到相应的值;
这样拿到值以后 我们可以写自己想要的一系列效果......
以后都是个人尝试了好几次,最后认为较为完美了,不足之处,欢迎指正并探讨