window.scrollTo()

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

scrollTo方法

工作上遇到了這樣的場景,在聊天頁面當使用者重新整理頁面時滾動條置底。很簡單對吧,大概如下範例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 50000px"></div>
<script>
scrollTo(0, document.body.offsetHeight)
</script>
</body>
</html>

但時實際上這段程式碼並不能保證使用者的每次重新整理都能把滾動條置底,但時問題出在哪裡呢?
1、經過多方測試發現,但凡在頁面開啟之後使用者改變了滾動條的位置,之後無論怎麼重新整理都是無效的。(在此之前是有效的)
2、最終發現是history的scrollRestoration屬性在作怪,這是一個實驗性屬性API,我用chrome瀏覽器做的測試,其預設為auto

scrollRestoration屬性允許Web應用程式在歷史導航上顯式地設定預設滾動恢復行為,也就是說用來控制是否記錄使用者的滾動條位置

<script>
history.scrollRestoration="manual"//將其設定為手動
scrollTo(0, document.body.offsetHeight)
</script>
<!--
這樣就達到了預期效果
但是前面說了這是實驗性API,那有沒有更好的辦法呢來解決
方法當然有,如下:
-->
<script>
setTimeout(function () {
scrollTo(0, document.body.offsetHeight)
})
</script>
<!--
為什麼放定時器裡就可以呢? 等下次聊到setTimeout&setInterval時再詳聊。
-->

若有誤,請斧正! 感謝!

相關文章

程式語言 最新文章