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

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

成都創(chuàng)新互聯(lián)公司是專業(yè)的如東網(wǎng)站建設(shè)公司，如東接單;提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行如東網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

這是我們將使用的 HTML，<header> 組件是我們希望當(dāng)我們向下滾動(dòng)時(shí)，始終浮動(dòng)在頁面頂部的一個(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' 事件，并且每次用戶滾動(dòng)時(shí)我們都會(huì)取出當(dāng)前的 scrollY 值。

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

我們將滾動(dòng)位置存儲(chǔ)在 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)浮動(dòng)的效果 */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

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

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

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

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

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

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

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

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

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

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

  // 這包含了對(duì) requestAnimationFrame 的引用，所以我們可以在我們希望的任何時(shí)候停止它
  let frame;
  
  // 防抖動(dòng)函數(shù)將返回一個(gè)可以接受多個(gè)參數(shù)的新函數(shù)
  return (...params) => {
    
    // 如果 frame 的值存在，那就清除對(duì)應(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)，我們可以告訴瀏覽器我們的滾動(dòng)事件不會(huì)被觸摸交互阻止（例如與谷歌地圖等插件交互時(shí)）。這允許瀏覽器立即滾動(dòng)頁面，因?yàn)樗F(xiàn)在知道該事件不會(huì)被阻止。

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

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

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

分享文章：使用CSS怎么實(shí)現(xiàn)用戶滾動(dòng)位置應(yīng)用樣式
文章地址：http://jinyejixie.com/article30/posppo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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