怎么用css實現基于用戶滾動應用

這篇文章主要介紹怎么用css實現基于用戶滾動應用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　通過將當前滾動偏移映射到html元素上的屬性，我們可以根據當前滾動位置設置頁面上的元素樣式。我們可以使用它來構建一個浮動導航組件。

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

　　<header>I'mthepageheader</header>

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

　　<p>Morebeautifulcontent...</p>

　　<p>Content...</p>

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

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

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

　　});

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

　　<htmldata-scroll="0">

　　現在我們可以使用此屬性來設置頁面上的元素樣式。

　　/*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);

　　}

　　基本上就是這樣，當向下滾動時，標題現在將自動從頁面中分離并浮動在內容之上。JavaScript代碼并不關心這一點，它的任務就是將滾動偏移量放在數據屬性中。這很好，因為JavaScript和CSS之間沒有緊密耦合。

　　仍有一些改進，主要是在性能領域。

　　但首先，我們必須修復腳本，以適應頁面加載時滾動位置不在頂部的情況。在這些情況下，標題將呈現錯誤。

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

　　//Readsoutthescrollpositionandstoresitinthedataattribute

　　//sowecanuseitinourstylesheets

　　conststoreScroll=()=>{

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

　　}

　　//Listenfornewscrollevents

　　document.addEventListener('scroll',storeScroll);

　　//Updatescrollpositionforfirsttime

　　storeScroll();

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

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

　　//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();

　　通過標記事件，passive我們可以告訴瀏覽器我們的滾動事件不會被觸摸交互取消（例如與谷歌地圖等插件交互時）。這允許瀏覽器立即滾動頁面，因為它現在知道該事件不會被取消。

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

以上是“怎么用css實現基于用戶滾動應用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！