純css美化滾動條樣式

emperinter發表於2020-10-03
CSS

https://www.emperinter.info/2020/09/20/scrollbar-in-browser/

image

自己完善自己部落格再Ipad等移動端的選單時選用了左右滑動的選單模式！當然就會使用到滾動條了，而預設的滾動條有多醜大家清楚吧！就搜到了純CSS美化滾動條樣式的方法！

方法！

webkit核心瀏覽器

Webkit支援擁有overflow屬性的區域，列表框，下拉選單，textarea的滾動條自定義樣式。當然，相容所有瀏覽器的滾動條樣式目前是不存在的。

  • 可選項
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條裡面的小方塊，能上下左右移動(取決於是垂直還是水平)
::-webkit-scrollbar-track 滾動條的軌道(裡面裝有thumb)
::-webkit-scrollbar-button 滾動條軌道兩端的按鈕，允許通過點選微調小方塊的位置
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分(除去)
::-webkit-scrollbar-corner 邊角，及兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於拖動調整元素大小的小控制元件
  • 改變瀏覽器預設的滾動條樣式：
::-webkit-scrollbar-track-piece { //滾動條凹槽的顏色，還可以設定邊框屬性
background-color:#f8f8f8;
}
::-webkit-scrollbar {//滾動條的寬度
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {//滾動條的設定
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}
  • 給特定的div模組修改滾動條的樣式,比如我們給class名為emperinter的新增滾動條樣式:
.emperinter::-webkit-scrollbar {
 width: 8px;
}
 .emperinter::-webkit-scrollbar-track {
 background-color:red;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .emperinter::-webkit-scrollbar-thumb {
 background-color:green;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}

IE瀏覽器

scrollbar-arrow-color: #f4ae21; /**//*三角箭頭的顏色*/   
scrollbar-face-color: #333; /**//*立體滾動條的顏色*/   
scrollbar-3dlight-color: #666; /**//*立體滾動條亮邊的顏色*/   
scrollbar-highlight-color: #666; /**//*滾動條空白部分的顏色*/   
scrollbar-shadow-color: #999; /**//*立體滾動條陰影的顏色*/   
scrollbar-darkshadow-color: #666; /**//*立體滾動條強陰影的顏色*/   
scrollbar-track-color: #666; /**//*立體滾動條背景顏色*/   
scrollbar-base-color:#f8f8f8; /**//*滾動條的基本顏色*/

Firefox

這個貌似原生提供的很少，只找到兩個屬性！比較難啃，有純CSS實現的方法麻煩留言。我找到的屬性具體可以參考https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars

  • scrollbar-color

  • scrollbar-width

  • 例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL + VUE_APP_ASSETS + '/' %>favicon2.ico" />
    <title>滾動條樣式</title>
    <style>
		.scroller {
		  width: 100%;
		  height: 500px;
		  overflow-y: scroll;
		  scrollbar-color: rebeccapurple green;
		  scrollbar-width: thin;
		}
		.content{
			font-size:38px;
			color: chocolate;
			margin-left: 50px;
			margin-right: 50px;
			padding: 20px;
			background-color: aliceblue;
		}
    </style>
	
	
  </head>
  <body>
   <!-- Learn about this code on MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars -->
	   <div class="scroller">
		   <div class="content">
			   Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
			   welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
			   Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
			   tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
			   Dandelion cucumber earthnut pea peanut soko zucchini.
			   Python3 簡介
			   
			   Python 是一個高層次的結合瞭解釋性、編譯性、互動性和麵向物件的指令碼語言。
			   
			   Python 的設計具有很強的可讀性，相比其他語言經常使用英文關鍵字，其他語言的一些標點符號，它具有比其他語言更有特色語法結構。
			   
			       Python 是一種解釋型語言： 這意味著開發過程中沒有了編譯這個環節。類似於PHP和Perl語言。
			   
			       Python 是互動式語言： 這意味著，您可以在一個 Python 提示符 >>> 後直接執行程式碼。
			   
			       Python 是面嚮物件語言: 這意味著Python支援物件導向的風格或程式碼封裝在物件的程式設計技術。
			   
			       Python 是初學者的語言：Python 對初級程式設計師而言，是一種偉大的語言，它支援廣泛的應用程式開發，從簡單的文書處理到 WWW 瀏覽器再到遊戲。
			   
		   </div>
	   </div>
  </body>
</html>

參考

相關文章