Lot'sofcontenthere...

Morebeautifulcontent...

Content...

首先，我們將監(jiān)聽該'scroll'事件，document并且scrollY每次用戶滾動時我們都會請求當(dāng)前位置。

document.addEventListener('scroll',()=>{

document.documentElement.dataset.scroll=window.scrollY;

});

我們將滾動位置存儲在html元素的數(shù)據(jù)屬性中。如果您使用開發(fā)工具查看DOM，它將如下所示。

現(xiàn)在我們可以使用此屬性來設(shè)置頁面上的元素樣式。

/*Makesuretheheaderisalwaysatleast3emhigh*/

header{

min-height:3em;

width:100%;

background-color:#fff;

}

/*Reservethesameheightatthetopofthepageastheheadermin-height*/

html:not([data-scroll='0'])body{

padding-top:3em;

}

/*Switchtofixedpositioning,andsticktheheadertothetopofthepage*/

html:not([data-scroll='0'])header{

position:fixed;

top:0;

z-index:1;

/*Thisbox-shadowwillhelpsellthefloatingeffect*/

box-shadow:00.5emrgba(0,0,0,.5);

}

基本上就是這樣，當(dāng)向下滾動時，標(biāo)題現(xiàn)在將自動從頁面中分離并浮動在內(nèi)容之上。JavaScript代碼并不關(guān)心這一點(diǎn)，它的任務(wù)就是將滾動偏移量放在數(shù)據(jù)屬性中。這很好，因?yàn)镴avaScript和CSS之間沒有緊密耦合。

仍有一些改進(jìn)，主要是在性能領(lǐng)域。

但首先，我們必須修復(fù)腳本，以適應(yīng)頁面加載時滾動位置不在頂部的情況。在這些情況下，標(biāo)題將呈現(xiàn)錯誤。

頁面加載時，我們必須快速獲取當(dāng)前滾動偏移量。這確保了我們始終與當(dāng)前的事態(tài)同步。

//Readsoutthescrollpositionandstoresitinthedataattribute

//sowecanuseitinourstylesheets

conststoreScroll=()=>{

document.documentElement.dataset.scroll=window.scrollY;

}

//Listenfornewscrollevents

document.addEventListener('scroll',storeScroll);

//Updatescrollpositionforfirsttime

storeScroll();

接下來我們將看一些性能改進(jìn)。如果我們請求該scrollY位置，瀏覽器將必須計(jì)算頁面上每個元素的位置，以確保它返回正確的位置。如果我們不強(qiáng)迫它每次滾動互動都這樣做是最好的。

要做到這一點(diǎn)，我們需要一個debounce方法，這個方法會將我們的請求排隊(duì)，直到瀏覽器準(zhǔn)備好繪制下一幀，此時它已經(jīng)計(jì)算了頁面上所有元素的位置，所以它不會再來一遍。

//Thedebouncefunctionreceivesourfunctionasaparameter

constdebounce=(fn)=>{

//ThisholdstherequestAnimationFramereference,sowecancancelitifwewish

letframe;

//Thedebouncefunctionreturnsanewfunctionthatcanreceiveavariablenumberofarguments

return(...params)=>{

//Iftheframevariablehasbeendefined,clearitnow,andqueuefornextframe

if(frame){

cancelAnimationFrame(frame);

}

//Queueourfunctioncallforthenextframe

frame=requestAnimationFrame(()=>{

//Callourfunctionandpassanyparamswereceived

fn(...params);

});

}

};

//Readsoutthescrollpositionandstoresitinthedataattribute

//sowecanuseitinourstylesheets

conststoreScroll=()=>{

document.documentElement.dataset.scroll=window.scrollY;

}

//Listenfornewscrollevents,herewedebounceour`storeScroll`function

document.addEventListener('scroll',debounce(storeScroll));

//Updatescrollpositionforfirsttime

storeScroll();

通過標(biāo)記事件，passive我們可以告訴瀏覽器我們的滾動事件不會被觸摸交互取消（例如與谷歌地圖等插件交互時）。這允許瀏覽器立即滾動頁面，因?yàn)樗F(xiàn)在知道該事件不會被取消。

document.addEventListener('scroll',debounce(storeScroll),{passive:true});

以上是“怎么用css實(shí)現(xiàn)基于用戶滾動應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！