小編精選 - 技術文章翻譯 · 03月21日

用 24 行 CSS 建立自訂捲軸

您是否曾經遇到過一個帶有漂亮滾動條的網站，然後心想“哇，我希望我能建立這樣的東西。”我也是！經過一番調查後，我發現為您的部落格或個人作品集建立自訂捲軸並不需要大量的 CSS。

今天，我們將建立一個漸進式進度條，當您捲動時，它會從零不透明度淡入完全不透明度。本教學只需要基礎的 HTML、CSS 和 JavaScript 知識，不會使用任何 JavaScript 框架或函式庫。您可以在CodePen上找到完整的程式碼！

HTML。

首先讓我們建立我們的文件結構。在 HTML CodePen 編輯器內部新增兩個元素：進度條和進度容器。

進度條將指示使用者向下捲動頁面的距離。進度條容器將跨越頁面的整個高度並包含進度條。

我們還加入一個帶有文字“Welcome”的頁面標題和一些 lorem ipsem 段落。我加入了其中七個段落，但為了簡潔起見，本文僅包含一個。

<h1>Welcome.</h1>
<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur
  provident eveniet veritatis ipsa id consectetur ab tenetur dolores eaque.
  Temporibus laboriosam cum corporis amet doloremque animi aut ipsa ea a?
</p>

這是我們的網頁目前的樣子。

HTML 頁面

CSS。

現在我們準備好加入我們的樣式。首先，讓我們加入一些基本的頁面樣式，以使我們的網站看起來更好。

body {
  background: #171414;
  font-family: "Courier New", Courier, monospace;
  color: #ffffff;
  padding: 15% 15% 5%;
}

p {
  font-size: 1.8rem;
}

p:first-of-type {
  margin-top: 100px;
}

h1 {
  font-size: 200px;
  position: absolute;
  top: -5%;
  left: 15%;
  opacity: 25%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

CSS 1

接下來讓我們隱藏預設的瀏覽器捲軸。我們可以使用 webkit 供應商前綴來隱藏 Chrome 和 Safari 中的捲軸。

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

我們需要對 Firefox 進行特殊考慮，因為它不是 webkit 瀏覽器，並且不會回應 webkit 供應商前綴（如 Chrome 和 Safari）。

html {
  scrollbar-width: none;
}

現在我們準備好設定自訂捲軸的樣式了。首先讓我們設定滾動條容器。我們希望滾動條容器固定在視窗的右側，因此我們將使用固定位置，並將頂部和右側值設為 0。我們將為滾動容器提供十個像素的寬度和非常淺的灰色背景。

#progressBarContainer {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
}

現在您應該看到滾動容器出現在視窗的右側。

CSS 2

我們的進度條也將固定在視窗的右側，寬度為十個像素，但是，我們將給它一個從紅色到紫色的線性漸進，以使其脫穎而出。

#progressBar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to top, violet, red);
  height: 100%;
  opacity: 100%;
}

CSS 3

我們希望動態更新滾動進度條的高度和不透明度，因此讓我們將高度和不透明度設為零。

#progressBar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to top, violet, red);
  height: 0;
  opacity: 0;
}

JavaScript。

要更新進度條的高度和不透明度，我們需要寫幾行 JavaScript。讓我們先取得進度條 DOM 節點。

const progressBar = document.querySelector("#progressBar");

我們還需要計算網頁的總高度。我們可以透過整個文件主體滾動高度減去視窗內部高度來計算總高度。

let totalPageHeight = document.body.scrollHeight - window.innerHeight;

接下來，讓我們向視窗新增一個事件偵聽器。當我們滾動時，我們想要計算新的進度高度。我們可以透過先將視窗的頁面 Y 偏移量除以總頁面高度來計算小數。要在 CSS 程式碼中使用這個值，我們必須將該分數乘以 100（得到百分比）。

最後，我們可以將進度條的高度和不透明度設定為新的進度高度。

不熟${}語法？它稱為模板字串或模板文字，它允許您將計算表達式（${} 之間的值）與純字串組合起來。

window.onscroll = () => {
  let newProgressHeight = (window.pageYOffset / totalPageHeight) * 100;
  progressBar.style.height = `${newProgressHeight}%`;
  progressBar.style.opacity = `${newProgressHeight}%`;
};

結論。

就是這樣！現在，只需幾行 CSS，您就擁有了一個漂亮的自訂捲軸。

原文出處：https://dev.to/emmabostian/creating-a-custom-scroll-bar-in-24-lines-of-css-4gg0

0個讚 0留言 339瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。