使用智能 CSS 基于用戶滾動位置應用樣式
通過將當前滾動偏移量添加到到 html 元素的屬性上，我們可以根據(jù)當前滾動位置設置網(wǎng)頁上的元素樣式。我們可以使用它來構(gòu)建一個浮動在網(wǎng)頁頂部的導航組件。
這是我們將使用的 HTML，<header> 組件是我們盼望當我們向下滾動時，始終浮動在網(wǎng)頁頂部的一個組件。
<header>I'm the page header</header> <p>Lot's of content here...</p> <p>More beautiful content...</p> <p>Content...</p>
首先，我們將監(jiān)聽 document 上的 'scroll' 事件，并且每次用戶滾動時我們都會掏出當前的 scrollY 值。
document.addEventListener('scroll', () => {
document.documentElement.dataset.scroll = window.scrollY;
});
我們將滾動位置存儲在 html 元素的數(shù)據(jù)屬性中。假如您使用開發(fā)工具查看 DOM，它將如下所示：<html data-scroll="0">
如今我們可以使用此屬性來設置網(wǎng)頁上的元素樣式。
/* 保證 header標簽始終高于 3em */
header {
min-height: 3em;
width: 100%;
background-color: #fff;
}
/* 在網(wǎng)頁頂部保留與 header 的 min-height 雷同的高度 */
html:not([data-scroll='0']) body {
padding-top: 3em;
}
/* 將 header 標簽切換成 fixed 定位模式，并且將它固定在網(wǎng)頁頂部 */
html:not([data-scroll='0']) header {
position: fixed;
top: 0;
z-index: 1;
/* box-shadow 屬性能夠加強浮動的結(jié)果 */
box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}
基本上就是如許，當用戶向下滾動時，header 標簽將主動從網(wǎng)頁中星散并浮動在內(nèi)容之上。javascript 代碼并不關(guān)心這一點，它的義務就是將滾動偏移量放在數(shù)據(jù)屬性中。這很完善，由于 javascript 和 CSS 之間沒有緊密耦合。
但仍有一些可以改進的地方，重要是在性能方面。
首先，我們必須修改 javascript 腳本，以適應網(wǎng)頁加載時滾動位置不在頂部的情況。在如許的情況下，header 標簽將呈現(xiàn)錯誤的樣式。
網(wǎng)頁加載時，我們必須快速獲取當前的滾動偏移量，如許確保了我們始終與當前的網(wǎng)頁的狀況同步。
// 讀出當前網(wǎng)頁的滾動位置并將其存入 document 的 data 屬性中
// 因此我們就可以在我們的樣式表中使用它
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// 監(jiān)聽滾動事件
document.addEventListener('scroll', storeScroll);
// 第一次打開網(wǎng)頁時就更新滾動位置
storeScroll();
接下來我們將看一些性能方面改進。假如我們想要獲取 scrollY 滾動位置，欣賞器將必須計算網(wǎng)頁上每個元素的位置，以確保它返回精確的位置。假如我們不強制它每次滾動都取值才是最好的做法。
要做到這一點，我們必要一個 debounce（防抖動）方法，這個方法會將我們的取值請求加入一個隊列中，在欣賞器預備好繪制下一幀之前都不會重新取值，此時它已經(jīng)計算出了網(wǎng)頁上所有元素的位置，所以它不會賡續(xù)重復雷同的工作。
// 防抖動函數(shù)接受一個我們自定義的函數(shù)作為參數(shù)
const debounce = (fn) => {
// 這包含了對 requestAnimationFrame 的引用，所以我們可以在我們盼望的任何時候制止它
let frame;
// 防抖動函數(shù)將返回一個可以接受多個參數(shù)的新函數(shù)
return (...params) => {
// 假如 frame 的值存在，那就消滅對應的回調(diào)
if (frame) {
cancelAnimationFrame(frame);
}
// 使我們的回調(diào)在欣賞器下一幀刷新時實行
frame = requestAnimationFrame(() => {
// 實行我們的自定義函數(shù)并傳遞我們的參數(shù)
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 狀況，我們可以告訴欣賞器我們的滾動事件不會被觸摸交互阻止（例如與谷歌地圖等插件交互時）。這許可欣賞器立即滾動網(wǎng)頁，由于它如今知道該事件不會被阻止。
document.addEventListener('scroll', debounce(storeScroll), { passive: true });
解決了性能題目后，我們?nèi)缃窨梢酝ㄟ^穩(wěn)固的體例使用 javascript 將獲取的數(shù)據(jù)提供應 CSS，并可以使用它來為網(wǎng)頁上的元素添加樣式。
以上就是本文的悉數(shù)內(nèi)容，盼望對大家的學習有所幫助，也盼望大家多多支持圖趣網(wǎng)。
本文地址：http://m.likemindfilms.com/tutorial/wd496.html
