成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于用戶滾動應(yīng)用CSS

rubyshen / 2935人閱讀

摘要：首先，我們將監(jiān)聽該事件，并且每次用戶滾動時我們都會請求當前位置。這允許瀏覽器立即滾動頁面，因為它現(xiàn)在知道該事件不會被取消。

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

這是我們將使用的HTML，

當我們向下滾動時，我們希望在內(nèi)容之上浮動的一個很好的組件。

I"m the page header


Lot"s of content here...


More beautiful content...


Content...

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

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

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

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

/* 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代碼并不關(guān)心這一點，它的任務(wù)就是將滾動偏移量放在數(shù)據(jù)屬性中。這很好，因為JavaScript和CSS之間沒有緊密耦合。

仍有一些改進，主要是在性能領(lǐng)域。

但首先，我們必須修復(fù)腳本，以適應(yīng)頁面加載時滾動位置不在頂部的情況。在這些情況下，標題將呈現(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 });

CodePen

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101678.html

相關(guān)文章

  • 譯-使用Scroll Snapping實現(xiàn)CSS控制頁面滾動

    摘要：過去滾動捕捉只能通過實現(xiàn)，但現(xiàn)在得益于新的滾動捕捉模塊，這種效果已經(jīng)可以通過實現(xiàn)了。同時令人慶幸的是瀏覽器可以根據(jù)用戶的滾動方式自動控制并判斷是否利用捕捉點捕捉。 特別聲明，本文翻譯自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于譯者能力，譯文或存在不足，歡迎大家指出。如需轉(zhuǎn)載，煩請注明出處。 滾...

    lastSeries 評論0 收藏0

  • 譯-使用Scroll Snapping實現(xiàn)CSS控制頁面滾動

    摘要：過去滾動捕捉只能通過實現(xiàn)，但現(xiàn)在得益于新的滾動捕捉模塊，這種效果已經(jīng)可以通過實現(xiàn)了。同時令人慶幸的是瀏覽器可以根據(jù)用戶的滾動方式自動控制并判斷是否利用捕捉點捕捉。 特別聲明，本文翻譯自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于譯者能力，譯文或存在不足，歡迎大家指出。如需轉(zhuǎn)載，煩請注明出處。 滾...

    Tychio 評論0 收藏0

  • 可能是最全的前端動效庫匯總

    摘要：非常的龐大，而且它是完全為設(shè)計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一?？赡苁莿?chuàng)建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現(xiàn)實生活中的物理運動碰撞慣性動畫庫。 收集日期為2019-02-28，★代表當時的該項目在github的star數(shù)量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎(chǔ)庫，是許多基礎(chǔ)動...

    afishhhhh 評論0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評論0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    Hydrogen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<