[BUG] document.body.scrollTop=0不生效(回到顶部)
描述
让body回滚到最顶部,设置 document.body.scrollTop = 0;
。
微信内,安卓设备可以,IOS设备不可以。
原因
MDN中 scrollTop
是这样定义的
一个元素的
scrollTop
值是这个元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的scrollTop
值为0。
简单来说,scrollTop
是这个元素的内容相对于自己向上滚动的高度。
ios设备中没问题,但是安卓设备 body
比较特殊,即使body没有限制高度,body的内容没有相对于自己滚动,也会有 scrollTop
值。
然而如果限制了body高度,让body的内容相对于自己滚动, ios设备中 body.scrollTop 有值, 安卓设备 body.scrollTop 始终为0。
解决方案
不使用body,在body内部设置最大容器root盒子, 然后操作root盒子。
html,
body,
#root {
height: 100%;
}
#root {
overflow: auto;
}
<body>
<div id="root">
<!-- 这里放内容 -->
</div>
</body>
document.getElementById('root').scrollTop = 0;