window.scrollTo()

lscho 發布于2019-08-21 17:32 / 3567人閱讀

摘要：方法工作上遇到了這樣的場景，在聊天頁面當用戶刷新頁面時滾動條置底。若有誤，請斧正感謝

scrollTo方法

工作上遇到了這樣的場景，在聊天頁面當用戶刷新頁面時滾動條置底。很簡單對吧，大概如下范例：




    
    Title

但時實際上這段代碼并不能保證用戶的每次刷新都能把滾動條置底，但時問題出在哪里呢？
1、經過多方測試發現，但凡在頁面打開之后用戶改變了滾動條的位置，之后無論怎么刷新都是無效的。（在此之前是有效的）
2、最終發現是history的scrollRestoration屬性在作怪，這是一個實驗性屬性API，我用chrome瀏覽器做的測試，其默認為auto

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

若有誤，請斧正！感謝！

GPU云服務器云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89660.html

原生JS基于window.scrollTo()封裝垂直滾動動畫工具函數

摘要：概要原生基于封裝垂直滾動動畫工具函數，可應用與錨點定位回到頂部等操作。封裝原因在項目中，遇到需要實現垂直滾動效果的需求，初步想到的方法有兩個使用方法，但是這個方法是沒有動畫效果的，需要手動封裝一下。使用的動畫函數，缺點比較明顯需要引入。概要：原生JS基于window.scrollTo()封裝垂直滾動動畫工具函數，可應用與錨點定位、回到頂部等操作。封裝原因：在vue項目中，遇到需要...

Caizhenhao 2019-08-22 18:31 評論0 收藏0
window.scrollTo()函數注意點(js)

摘要：對頁面進行這樣的操作發現參數不起作用，也就是坐標。如果想讓這個參數器作用，我們的頁面寬度要大于瀏覽器的寬度。 window.scrollTo(50,28)對頁面進行這樣的操作發現參數50不起作用，也就是x坐標。如果想讓這個參數器作用，我們的頁面寬度要大于瀏覽器的寬度。

shengguo 2019-08-19 18:42 評論0 收藏0
[譯] scroll-behavior 滑順的捲動效果

摘要：不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。的方式非常簡單，只要在該元素設定注意是而不是這個方式非常方便不過目前只有支援，查閱。眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲...

PiscesYE 2019-08-21 10:52 評論0 收藏0
[譯] scroll-behavior 滑順的捲動效果

摘要：不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。的方式非常簡單，只要在該元素設定注意是而不是這個方式非常方便不過目前只有支援，查閱。眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲...

james 2019-08-30 13:04 評論0 收藏0
通過focusout事件解決IOS鍵盤收起時界面不歸位的問題

摘要：原因經查是輸入框的事件無法冒泡。這時，我們問題得到解決了，當從輸入框輸入內容，然后點擊鍵盤的完成收起鍵盤，效果符合我們的預期。輸入框失去焦點，要把鍵盤推出頁面的滾動部分還原。問題癥狀今天在開發一個移動端的 H5 頁面時，遇到了 IOS 上鍵盤收起時界面無法歸位的問題。下面詳細描述下問題和癥狀：頁面結構出問題的頁面是一個表單結構。即類似于一個 div 下有4個 input 表單的...

vvpale 2019-08-02 15:34 評論0 收藏0