css捲軸怎麼設定

隨著網頁的不斷發展，使用者喜好也逐漸改變。而正是因為這些變化，許多網站都在逐漸更新自己的設計樣式，其中一個不可或缺的元素就是滾動條。不得不說，滾動條已成為許多網站必不可少的一個設計元素。在CSS中，捲軸的樣式可以透過一系列的CSS選擇器來實現，下面我們來詳細解析如何設定CSS捲軸。

什麼是捲軸？

在介紹如何設定捲軸前，我們首先需要了解什麼是捲軸。

捲軸是我們平常經常使用的互動式元件，它常常出現在網頁的側邊欄、框架或包含區域中。使用捲軸可以方便地在較小的區域內捲動內容，從而查看全部內容。一般來說，滾動條分為兩種類型：水平滾動條和垂直滾動條，其中垂直滾動條是最常用的一種。

在CSS中，我們可以輕鬆地自訂自己的捲軸樣式。接下來，我們將逐一介紹如何設定CSS捲軸。

如何設定純CSS捲軸

設定CSS捲軸需要使用::-webkit-scrollbar和::-webkit-scrollbar-thumb選擇器。下面，我們將分別對它們的使用方法進行解析。

::-webkit-scrollbar選擇器

::-webkit-scrollbar選擇器允許你為捲軸容器設定樣式，包括捲軸背景顏色、高度、寬度等等。舉個例子，使用::-webkit-scrollbar選擇器，我們可以將整個捲軸設定為灰色：

::-webkit-scrollbar {
  background-color: #eee;
  width: 8px;
}

上面的程式碼定義了一個寬度為8像素的捲軸容器，並將其背景設為淡灰色。

我們也可以利用CSS偽類別來客製化捲軸的狀態，例如：滾動條懸停、捲軸被點擊等等。比方說，下面的程式碼可以讓當滑鼠懸停在捲軸上時，將其捲軸顏色變為紅色：

::-webkit-scrollbar:hover {
  background-color: #f00;
}

::-webkit-scrollbar-thumb選擇器

在::-webkit-scrollbar選擇器中，我們已經定義好了捲軸的樣式，但是捲軸的外觀仍然是預設的樣式，比較單調。這時，我們需要用到::-webkit-scrollbar-thumb選擇器，來設定滾動條拇指（thumb）的樣式。

下面是一個設定拇指樣式的範例：

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}

這段程式碼為捲軸拇指定義了一個灰色背景和4個像素的圓角。

除了設定顏色和圓角外，我們還可以透過設定陰影、邊框等來進一步美化捲軸的外觀：

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.1);
  border: 1px solid #d8d8d8;
}

上面的程式碼定義了一個帶有邊框和陰影效果的滾動條拇指。

如何設定全網相容的CSS捲軸

雖然上面我們介紹瞭如何設定純CSS捲軸，但是這種方式只能在Webkit核心的瀏覽器上生效（例如： Chrome、Safari等）。而對於其他瀏覽器（如：Firefox、Edge等），則需要使用JavaScript才能達到類似的效果。

幸運的是，一些第三方的CSS函式庫已經為我們提供了這方面的解決方案。比如說，我們可以使用mCustomScrollbar這個CSS函式庫，輕鬆地實作跨瀏覽器的自訂捲軸。

首先，引入mCustomScrollbar CSS檔案：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />

然後，在需要應用自訂捲軸的地方，引入以下兩個檔案：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

接下來，在JavaScript程式碼中，使用以下程式碼來初始化mCustomScrollbar：

$(document).ready(function () {
  $(".content").mCustomScrollbar();
});

上面的程式碼將在class為content的元素上套用mCustomScrollbar，並且可以在各種瀏覽器中生效。

同時，mCustomScrollbar也支援一些進階的自訂選項，例如：捲軸的寬度、捲軸顏色、捲軸行為等等。這些選項可以在初始化函數中進行設定：

$(".content").mCustomScrollbar({
  theme: "dark",
  scrollbarPosition: "inside",
  axis: "y",
  scrollInertia: 500
});

上面的程式碼定義了一個黑色的主題、內部垂直捲軸、滾動條效果為500毫秒的捲軸。

總結

在本文中，我們對使用CSS自訂捲軸進行了詳細講解。我們透過介紹::-webkit-scrollbar和::-webkit-scrollbar-thumb選擇器以及mCustomScrollbar這個函式庫來實作不同瀏覽器中的自訂捲軸。所以，在設計網頁時，不妨根據設計需求來客製化比預設捲軸更好看的滾動條效果。

以上是css捲軸怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！