溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS實現基于用戶滾動應用的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
通過將當前滾動偏移映射到html元素上的屬性，我們可以根據當前滾動位置設置頁面上的元素樣式。我們可以使用它來構建一個浮動導航組件。
這是我們將使用的HTML，<header>當我們向下滾動時，我們希望在內容之上浮動的一個很好的組件。
<header>I'm the page header</header> <p>Lot's of content here...</p> <p>More beautiful content...</p> <p>Content...</p>
首先，我們將監聽該'scroll'事件，document并且scrollY每次用戶滾動時我們都會請求當前位置。
document.addEventListener('scroll', () => {
document.documentElement.dataset.scroll = window.scrollY;
});我們將滾動位置存儲在html元素的數據屬性中。如果您使用開發工具查看DOM，它將如下所示。
<html data-scroll="0">
現在我們可以使用此屬性來設置頁面上的元素樣式。
/* Make sure the header is always at least 3em high */
header {
min-height: 3em;
width: 100%;
background-color: #fff;
}
/* Reserve the same height at the top of the page as the header min-height */
html:not([data-scroll='0']) body {
padding-top: 3em;
}
/* Switch to fixed positioning, and stick the header to the top of the page */
html:not([data-scroll='0']) header {
position: fixed;
top: 0;
z-index: 1;
/* This box-shadow will help sell the floating effect */
box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}基本上就是這樣，當向下滾動時，標題現在將自動從頁面中分離并浮動在內容之上。JavaScript代碼并不關心這一點，它的任務就是將滾動偏移量放在數據屬性中。這很好，因為JavaScript和CSS之間沒有緊密耦合。
仍有一些改進，主要是在性能領域。
但首先，我們必須修復腳本，以適應頁面加載時滾動位置不在頂部的情況。在這些情況下，標題將呈現錯誤。
頁面加載時，我們必須快速獲取當前滾動偏移量。這確保了我們始終與當前的事態同步。
// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// Listen for new scroll events
document.addEventListener('scroll', storeScroll);
// Update scroll position for first time
storeScroll();接下來我們將看一些性能改進。如果我們請求該scrollY位置，瀏覽器將必須計算頁面上每個元素的位置，以確保它返回正確的位置。如果我們不強迫它每次滾動互動都這樣做是最好的。
要做到這一點，我們需要一個debounce方法，這個方法會將我們的請求排隊，直到瀏覽器準備好繪制下一幀，此時它已經計算了頁面上所有元素的位置，所以它不會再來一遍。
// The debounce function receives our function as a parameter
const debounce = (fn) => {
// This holds the requestAnimationFrame reference, so we can cancel it if we wish
let frame;
// The debounce function returns a new function that can receive a variable number of arguments
return (...params) => {
// If the frame variable has been defined, clear it now, and queue for next frame
if (frame) {
cancelAnimationFrame(frame);
}
// Queue our function call for the next frame
frame = requestAnimationFrame(() => {
// Call our function and pass any params we received
fn(...params);
});
}
};
// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));
// Update scroll position for first time
storeScroll();通過標記事件，passive我們可以告訴瀏覽器我們的滾動事件不會被觸摸交互取消（例如與谷歌地圖等插件交互時）。這允許瀏覽器立即滾動頁面，因為它現在知道該事件不會被取消。
document.addEventListener('scroll', debounce(storeScroll), { passive: true });以上是CSS實現基于用戶滾動應用的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
