CSS實現(xiàn)基于用戶滾動應用的方法

小編給大家分享一下CSS實現(xiàn)基于用戶滾動應用的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)大興免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

通過將當前滾動偏移映射到html元素上的屬性，我們可以根據(jù)當前滾動位置設置頁面上的元素樣式。我們可以使用它來構(gòu)建一個浮動導航組件。

這是我們將使用的HTML，<header>當我們向下滾動時，我們希望在內(nèi)容之上浮動的一個很好的組件。

<header>I'm the page header</header>
<p>Lot's of content here...</p>
<p>More beautiful content...</p>
<p>Content...</p>

首先，我們將監(jiān)聽該'scroll'事件，document并且scrollY每次用戶滾動時我們都會請求當前位置。

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

我們將滾動位置存儲在html元素的數(shù)據(jù)屬性中。如果您使用開發(fā)工具查看DOM，它將如下所示。

<html data-scroll="0">

現(xiàn)在我們可以使用此屬性來設置頁面上的元素樣式。

/* 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);
}

基本上就是這樣，當向下滾動時，標題現(xiàn)在將自動從頁面中分離并浮動在內(nèi)容之上。JavaScript代碼并不關心這一點，它的任務就是將滾動偏移量放在數(shù)據(jù)屬性中。這很好，因為JavaScript和CSS之間沒有緊密耦合。

仍有一些改進，主要是在性能領域。

但首先，我們必須修復腳本，以適應頁面加載時滾動位置不在頂部的情況。在這些情況下，標題將呈現(xiàn)錯誤。

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

// 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方法，這個方法會將我們的請求排隊，直到瀏覽器準備好繪制下一幀，此時它已經(jīng)計算了頁面上所有元素的位置，所以它不會再來一遍。

// 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我們可以告訴瀏覽器我們的滾動事件不會被觸摸交互取消（例如與谷歌地圖等插件交互時）。這允許瀏覽器立即滾動頁面，因為它現(xiàn)在知道該事件不會被取消。

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

以上是CSS實現(xiàn)基于用戶滾動應用的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：CSS實現(xiàn)基于用戶滾動應用的方法
本文網(wǎng)址：http://jinyejixie.com/article26/ghohcg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、微信小程序、網(wǎng)站維護、Google、云服務器、App開發(fā)

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

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

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

CSS實現(xiàn)基于用戶滾動應用的方法