使用scrollTop失效并一直为0(移动端 手机 真机)
问题
今天在浏览器的仿真界面中,scrollTop 数值正常,可以正常显示。但是在真机上面 scrollTop的值一直为 0 不发生变化。(表现状态为到达页头部锚点失效)
解决
html与 body 的 height 不要设置为 100%。设置为 min-height如果不是必须的可以删除。
body {
width: 100%;
min-height: 100vh;
}
把原来的 定义的 document.documentElement.scrollTop 修改为 window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
目的是解决兼容性问题。
var b = document.documentElement.scrollTop
修改为
var b = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
这样大多数情况可以解决。