Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

Day27-::-webkit-scrollbar 自訂與眾不同的滾動條效果

發表於 分類於 Disqus：

::-webkit-scrollbar

在現代網頁中，如果內容高於瀏覽器或是元素區塊的高度，會出現滾動條方便瀏覽，一般瀏覽器預設為灰色的樣式。

::-webkit-scrollbar

但有時候網站的風格，跟預設的滾動條樣式，與網站的整體設計風格產生不協調，為了解決這個問題，我們可以利用 ::-webkit-scrollbar 來來自訂滾動條外觀，從而提升網站的視覺一致性和用戶體驗。



💠 ::-webkit-scrollbar 基本用法

語法

1
2
3
4
5
6
7
選擇器::-webkit-scrollbar {
  屬性名: 屬性值;
}

選擇器::-webkit-scrollbar-thumb {
  屬性名: 屬性值;
}
  • ::-webkit-scrollbar ：控制整個滾動條的樣式
  • ::-webkit-scrollbar-thumb ：控制滑動條的樣式

範例

一起試試：［CODEPEN］

以下 HTML 為範例模板

1
2
3
<div class="box scrollbar">
  <!--省略文字-->
</div>
1
2
3
4
5
6
7
8
.box {
  height: 200px;
  width: 90%;
  margin: 30px auto;
  padding: 20px;
  overflow: auto;
  border: 2px solid #d1d1d1;
}


範例一：更改滾動條顏色

1
2
3
4
5
6
7
.scrollbar::-webkit-scrollbar {
  background-color: #007;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bada55;
}

::-webkit-scrollbar



範例二：隱藏滾動條

直接將 display: none 應用於 ::-webkit-scrollbar 可以隱藏滾動條，但仍然允許滾動。

1
2
3
.scrollbar::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar



範例三：調整滾動條寬度

可以將滾動條變得更細，以與網頁的設計風格更加協調。

1
2
3
4
5
6
7
8
.scrollbar::-webkit-scrollbar {
  background-color: #007;
  width: 6px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bada55;
}

::-webkit-scrollbar



瀏覽器相容性

你可能會發現 ::-webkit-scrollbar 依然有個前綴 -webkit- ，這代表功能還並非為標準的 CSS 規範，因此不同的瀏覽器引擎採用了各自的方式來提供類似的功能， -webkit- 前綴允許 WebKit 瀏覽器（如 Safari 和 Chrome）支援這些功能，但對於其他瀏覽器（如 Firefox）無法支援

::-webkit-scrollbar

那 Firefox 就不管了嗎？

當然不行～我們可以使用 scrollbar-color CSS 屬性



💠 scrollbar-color 基本用法

語法

1
2
3
選擇器 {
  scrollbar-color: 滑動條顏色 整個滾動條區塊顏色;
}

範例

一起試試：［CODEPEN］

以下 HTML 為範例模板

1
2
3
<div class="box scrollbar">
  <!--省略文字-->
</div>
1
2
3
4
5
6
7
8
.box {
  height: 200px;
  width: 90%;
  margin: 30px auto;
  padding: 20px;
  overflow: auto;
  border: 2px solid #d1d1d1;
}


範例一：滾動條顏色修改

1
2
3
.scrollbar {
  scrollbar-color: #bada55 #007;
}

scrollbar-color



範例二：隱藏滾動條

通過將滾動條顏色設置為透明來隱藏它，這樣用戶仍然可以滾動內容。

1
2
3
.scrollbar {
  scrollbar-color:  transparent transparent;
}

scrollbar-color



範例三：調整滾動條寬度

使用 scrollbar-width 來改變滾動條的寬度，如將其設為 thin 可以縮小滾動條。

1
2
3
4
.scrollbar {
  scrollbar-color: #bada55 #007;
  scrollbar-width: thin;
}

scrollbar-color



瀏覽器相容性

太好了~！那我們就直接使用 scrollbar-color 來設定滾動條樣式就好了！

如果你是這樣想就大錯特錯了！

我們可以看到 scrollbar-color 對於主流瀏覽器的支援度，目前對於 Safari 是不支援的

scrollbar-color

那這樣我們要換放棄 Safari 了嗎？

作為一個前端開發者是不會讓這種事情發生的！

還記得前面講到的 ::-webkit-scrollbar 是支援 Safari 的嗎？我們可以將兩種寫法都加上，確保樣式在任何主流瀏覽器皆可以出現



💠 滾動條相容樣式

一起試試：［CODEPEN］

由於 ::-webkit-scrollbar 和 scrollbar-color 屬於不同的瀏覽器支援範疇，建議在設計時將這兩者結合使用。

1
2
3
4
5
6
7
8
9
10
11
.scrollbar {
  scrollbar-color: #bada55 #007;
}

.scrollbar::-webkit-scrollbar {
  background-color: #007;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bada55;
}

要確保最大化的相容性，你可以透過 @supports ，針對不同瀏覽器的能力進行檢測，避免讓瀏覽器處理不支援的樣式，減少樣式處理的複雜度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@supports (scrollbar-color: auto) {
  .scrollbar {
    scrollbar-color: #bada55 #007;
  }
}

@supports selector(::-webkit-scrollbar) {
  .scrollbar::-webkit-scrollbar {
    background-color: #007;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: #bada55;
  }
}

💠 總結

常常遇到網站的風格跟滾動條樣式非常的不搭，看起來就會很突兀，但通過使用 ::-webkit-scrollbar 與 scrollbar-color 可以調整滾動條的外觀，對於網站是非常的實用！無論是在 Chrome、Safari 還是 Firefox 等主流瀏覽器中，都能達到一致的效果。

Reference



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️