這篇文章帶給大家的內容是關於CSS實現基於用戶滾動應用（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
透過將目前捲動偏移對應到html元素上的屬性，我們可以根據目前捲動位置設定頁面上的元素樣式。我們可以使用它來建立一個浮動導航元件。
這是我們將使用的HTML，
<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我們可以告訴瀏覽器我們的滾動事件不會被觸摸互動取消（例如與Google地圖等插件互動時）。這允許瀏覽器立即滾動頁面，因為它現在知道該事件不會被取消。
document.addEventListener('scroll', debounce(storeScroll), { passive: true });這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的CSS影片教學專欄！
#以上是CSS實現基於用戶滾動應用（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
