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

  • 相关阅读:
    密码加密
    注册视图
    session会话
    验证码功能
    使用Django表单替代html表单
    实现登陆视图功能
    设计登陆需求页面
    配置视图
    配置数据库
    npm 学习
  • 原文地址:https://www.cnblogs.com/whosmeya/p/12420691.html
Copyright © 2020-2023  润新知