當前位置:圖趣網(Tuquu) > 網頁設計教程 > 移動前端 > flex布局實現左側筆墨溢出省略右側筆墨自適應

使用智能 CSS 基于用戶滾動位置應用樣式

通過將當前滾動偏移量添加到到 html 元素的屬性上,我們可以根據當前滾動位置設置網頁上的元素樣式。我們可以使用它來構建一個浮動在網頁頂部的導航組件。

這是我們將使用的 HTML,<header> 組件是我們盼望當我們向下滾動時,始終浮動在網頁頂部的一個組件。

<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 元素的數據屬性中。假如您使用開發(fā)工具查看 DOM,它將如下所示:<html data-scroll="0">
如今我們可以使用此屬性來設置網頁上的元素樣式。

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

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

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

  /* box-shadow 屬性能夠加強浮動的結果 */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

基本上就是如許,當用戶向下滾動時,header 標簽將主動從網頁中星散并浮動在內容之上。javascript 代碼并不關心這一點,它的義務就是將滾動偏移量放在數據屬性中。這很完善,由于 javascript 和 CSS 之間沒有緊密耦合。

但仍有一些可以改進的地方,重要是在性能方面。

首先,我們必須修改 javascript 腳本,以適應網頁加載時滾動位置不在頂部的情況。在如許的情況下,header 標簽將呈現錯誤的樣式。

網頁加載時,我們必須快速獲取當前的滾動偏移量,如許確保了我們始終與當前的網頁的狀況同步。

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

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

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

接下來我們將看一些性能方面改進。假如我們想要獲取 scrollY 滾動位置,欣賞器將必須計算網頁上每個元素的位置,以確保它返回精確的位置。假如我們不強制它每次滾動都取值才是最好的做法。

要做到這一點,我們必要一個 debounce(防抖動)方法,這個方法會將我們的取值請求加入一個隊列中,在欣賞器預備好繪制下一幀之前都不會重新取值,此時它已經計算出了網頁上所有元素的位置,所以它不會賡續(xù)重復雷同的工作。

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

  // 這包含了對 requestAnimationFrame 的引用,所以我們可以在我們盼望的任何時候制止它
  let frame;
  
  // 防抖動函數將返回一個可以接受多個參數的新函數
  return (...params) => {
    
    // 假如 frame 的值存在,那就消滅對應的回調
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // 使我們的回調在欣賞器下一幀刷新時實行
    frame = requestAnimationFrame(() => {
      
      // 實行我們的自定義函數并傳遞我們的參數
      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 狀況,我們可以告訴欣賞器我們的滾動事件不會被觸摸交互阻止(例如與谷歌地圖等插件交互時)。這許可欣賞器立即滾動網頁,由于它如今知道該事件不會被阻止。

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

解決了性能題目后,我們如今可以通過穩(wěn)固的體例使用 javascript 將獲取的數據提供應 CSS,并可以使用它來為網頁上的元素添加樣式。

Live Demo on CodePen

以上就是本文的悉數內容,盼望對大家的學習有所幫助,也盼望大家多多支持圖趣網。

[教程作者:佚名]
免責聲明:本站文章系圖趣網整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd496.html
用純CSS實現鏤空結果的示例代碼
通過CSS變量修改樣式的方法示例
圖趣網微信
建議反饋
×