[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;

posted @ 2020-03-05 15:51  whosmeya  阅读(1938)  评论(0编辑  收藏  举报