溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用CSS 怎么實(shí)現(xiàn)用戶滾動位置應(yīng)用樣式

發(fā)布時(shí)間：2021-06-09 16:41:01 來源：億速云 閱讀：164 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)使用CSS 怎么實(shí)現(xiàn)用戶滾動位置應(yīng)用樣式，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

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

這是我們將使用的 HTML，<header> 組件是我們希望當(dāng)我們向下滾動時(shí)，始終浮動在頁面頂部的一個(gè)組件。

<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' 事件，并且每次用戶滾動時(shí)我們都會取出當(dāng)前的 scrollY 值。

document.addEventListener('scroll', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

我們將滾動位置存儲在 html 元素的數(shù)據(jù)屬性中。如果您使用開發(fā)工具查看 DOM，它將如下所示：<html data-scroll="0">
現(xiàn)在我們可以使用此屬性來設(shè)置頁面上的元素樣式。

/* 保證 header標(biāo)簽始終高于 3em */
header {
  min-height: 3em;
  width: 100%;
  background-color: #fff;
}

/* 在頁面頂部保留與 header 的 min-height 相同的高度 */
html:not([data-scroll='0']) body {
  padding-top: 3em;
}

/* 將 header 標(biāo)簽切換成 fixed 定位模式，并且將它固定在頁面頂部 */
html:not([data-scroll='0']) header {
  position: fixed;
  top: 0;
  z-index: 1;

  /* box-shadow 屬性能夠增強(qiáng)浮動的效果 */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

基本上就是這樣，當(dāng)用戶向下滾動時(shí)，header 標(biāo)簽將自動從頁面中分離并浮動在內(nèi)容之上。JavaScript 代碼并不關(guān)心這一點(diǎn)，它的任務(wù)就是將滾動偏移量放在數(shù)據(jù)屬性中。這很完美，因?yàn)?JavaScript 和 CSS 之間沒有緊密耦合。

但仍有一些可以改進(jìn)的地方，主要是在性能方面。

首先，我們必須修改 JavaScript 腳本，以適應(yīng)頁面加載時(shí)滾動位置不在頂部的情況。在這樣的情況下，header 標(biāo)簽將呈現(xiàn)錯(cuò)誤的樣式。

頁面加載時(shí)，我們必須快速獲取當(dāng)前的滾動偏移量，這樣確保了我們始終與當(dāng)前的頁面的狀態(tài)同步。

// 讀出當(dāng)前頁面的滾動位置并將其存入 document 的 data 屬性中
// 因此我們就可以在我們的樣式表中使用它
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// 監(jiān)聽滾動事件
document.addEventListener('scroll', storeScroll);

// 第一次打開頁面時(shí)就更新滾動位置
storeScroll();

接下來我們將看一些性能方面改進(jìn)。如果我們想要獲取 scrollY 滾動位置，瀏覽器將必須計(jì)算頁面上每個(gè)元素的位置，以確保它返回正確的位置。如果我們不強(qiáng)制它每次滾動都取值才是最好的做法。

要做到這一點(diǎn)，我們需要一個(gè) debounce（防抖動）方法，這個(gè)方法會將我們的取值請求加入一個(gè)隊(duì)列中，在瀏覽器準(zhǔn)備好繪制下一幀之前都不會重新取值，此時(shí)它已經(jīng)計(jì)算出了頁面上所有元素的位置，所以它不會不斷重復(fù)相同的工作。

// 防抖動函數(shù)接受一個(gè)我們自定義的函數(shù)作為參數(shù)
const debounce = (fn) => {

  // 這包含了對 requestAnimationFrame 的引用，所以我們可以在我們希望的任何時(shí)候停止它
  let frame;
  
  // 防抖動函數(shù)將返回一個(gè)可以接受多個(gè)參數(shù)的新函數(shù)
  return (...params) => {
    
    // 如果 frame 的值存在，那就清除對應(yīng)的回調(diào)
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // 使我們的回調(diào)在瀏覽器下一幀刷新時(shí)執(zhí)行
    frame = requestAnimationFrame(() => {
      
      // 執(zhí)行我們的自定義函數(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();

通過標(biāo)記事件為 passive 狀態(tài)，我們可以告訴瀏覽器我們的滾動事件不會被觸摸交互阻止（例如與谷歌地圖等插件交互時(shí)）。這允許瀏覽器立即滾動頁面，因?yàn)樗F(xiàn)在知道該事件不會被阻止。

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

解決了性能問題后，我們現(xiàn)在可以通過穩(wěn)定的方式使用 JavaScript 將獲取的數(shù)據(jù)提供給 CSS，并可以使用它來為頁面上的元素添加樣式。

看完上述內(nèi)容，你們對使用CSS 怎么實(shí)現(xiàn)用戶滾動位置應(yīng)用樣式有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手