怎么用css實(shí)現(xiàn)基于用戶滾動應(yīng)用

這篇文章主要介紹怎么用css實(shí)現(xiàn)基于用戶滾動應(yīng)用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　通過將當(dāng)前滾動偏移映射到html元素上的屬性，我們可以根據(jù)當(dāng)前滾動位置設(shè)置頁面上的元素樣式。我們可以使用它來構(gòu)建一個浮動導(dǎo)航組件。

　　這是我們將使用的HTML，<header>當(dāng)我們向下滾動時，我們希望在內(nèi)容之上浮動的一個很好的組件。

　　<header>I'mthepageheader</header>

　　<p>Lot'sofcontenthere...</p>

　　<p>Morebeautifulcontent...</p>

　　<p>Content...</p>

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

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

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

　　});

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

　　<htmldata-scroll="0">

　　現(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)注億速云行業(yè)資訊頻道！