window.scrollTo()

lscho 發(fā)布于2019-08-21 17:32 / 3575人閱讀

摘要：方法工作上遇到了這樣的場(chǎng)景，在聊天頁面當(dāng)用戶刷新頁面時(shí)滾動(dòng)條置底。若有誤，請(qǐng)斧正感謝

scrollTo方法

工作上遇到了這樣的場(chǎng)景，在聊天頁面當(dāng)用戶刷新頁面時(shí)滾動(dòng)條置底。很簡(jiǎn)單對(duì)吧，大概如下范例：




    
    Title

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

scrollRestoration屬性允許Web應(yīng)用程序在歷史導(dǎo)航上顯式地設(shè)置默認(rèn)滾動(dòng)恢復(fù)行為,也就是說用來控制是否記錄用戶的滾動(dòng)條位置

若有誤，請(qǐng)斧正！感謝！

GPU云服務(wù)器云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89660.html

相關(guān)文章

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

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

Caizhenhao 2019-08-22 18:31 評(píng)論0 收藏0
window.scrollTo()函數(shù)注意點(diǎn)(js)

摘要：對(duì)頁面進(jìn)行這樣的操作發(fā)現(xiàn)參數(shù)不起作用，也就是坐標(biāo)。如果想讓這個(gè)參數(shù)器作用，我們的頁面寬度要大于瀏覽器的寬度。 window.scrollTo(50,28)對(duì)頁面進(jìn)行這樣的操作發(fā)現(xiàn)參數(shù)50不起作用，也就是x坐標(biāo)。如果想讓這個(gè)參數(shù)器作用，我們的頁面寬度要大于瀏覽器的寬度。

shengguo 2019-08-19 18:42 評(píng)論0 收藏0
[譯] scroll-behavior 滑順的捲動(dòng)效果

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

PiscesYE 2019-08-21 10:52 評(píng)論0 收藏0
[譯] scroll-behavior 滑順的捲動(dòng)效果

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

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

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

vvpale 2019-08-02 15:34 評(píng)論0 收藏0