CSS Scrollbars 自定義捲軸樣式(僅支援 Firefox)

2021/12/16 174 2 網站技術 , CSS

CSS Scrollbars 標準化了 Windows IE 5.5 在西元 2000 年引入的過時捲軸顏色屬性,這個屬性可以自訂捲軸的寬度與顏色,但可用的選項與整體自由度就比 Webkit 瀏覽器支援的 ::-webkit-scrollbar 還少很多,畢竟一個是選擇器(能加一堆有的沒的屬性,很自由),而這次要解說的這個僅僅只是兩個屬性搭配使用,首先寬度要用 scrollbar-width 來調整,但卻只有 auto(自動,即採用預設捲軸寬度)、thin(細捲軸)跟 none(關閉捲軸)可以使用,再來,顏色用 scrollbar-color 來調整,除了 auto(自動,即採用預設捲軸顏色)外,就只能依照格式分別填入兩個顏色值,第一個是捲軸本體的顏色,第二個是捲軸軌道(底)的顏色。最重要的事情是,目前這個 CSS 屬性僅支援 Firefox 64+,就加減用吧!示範方面,我分為全局跟指定區塊,給大家參考這些屬性的用法!

全局捲軸

意思就是整個網頁有捲軸的地方都會採用您指定的樣式,CSS 如下:

/*-- 全局捲軸 --*/

html, body {
  scrollbar-color: #768B23 #ccc;
  scrollbar-width: auto;
}

這是一個綠色、預設寬度的全局捲軸。

區塊捲軸

意思是指定的區塊才會採用您指定的捲軸樣式,CSS 如下:

/*-- 指定區塊內捲軸 --*/

.block {
  width: 200px;
  height: 200px;
  padding: 5px;
  overflow-y: auto;
  background-color: #dedede;
  scrollbar-color: #0063B1 #888;
  scrollbar-width: thin;
}

這是一個藍色、細的區塊捲軸,我這邊指定給 block 這個 class 的元件,所以 HTML 別忘記 <div class="block"></div>

雖然自由度不高,但使用起來相對容易,適合初學者玩網頁時試試!

CodePen

融合了本次所有的範例供您參考。

See the Pen
CSS Scrollbars 自定義捲軸樣式(僅支援Firefox)
by Feng, Cheng-Chi (@qwe987299)
on CodePen.


▲ 精選圖片。

贊助廣告 ‧ Sponsor advertisements
徵信社有甚麼服務| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社抓姦介紹| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢子女監護權| 馭夫術手段| 合法徵信社推薦| 挖掘徵信社新聞| 打擊小三包二奶| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費可以要多少| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 一日偵探雞排妹|
【業界首推立達徵信FB