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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM