基于用戶滾動應用CSS

rubyshen 發布于2019-08-23 15:12 / 2927人閱讀

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

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

這是我們將使用的HTML，

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

I"m the page header

Lot"s of content here...

More beautiful content...

Content...

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

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

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

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

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

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

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

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

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

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

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

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

CodePen

云服務器 GPU云服務器 css滾動條滾動條css html 滾動條 css 循環滾動css js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101678.html

譯-使用Scroll Snapping實現CSS控制頁面滾動

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

lastSeries 2019-08-02 11:50 評論0 收藏0
譯-使用Scroll Snapping實現CSS控制頁面滾動

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

Tychio 2019-08-29 17:06 評論0 收藏0
可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

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

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

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

Hydrogen 2019-08-02 11:46 評論0 收藏0