自定義滾動條樣式

滾動條美化：

原生滾動條不是很好看，能拯救一下還是要拯救的。

1.滾動條的屬性們：

1、滾動條的屬性（可選項）

/*  滾動條整體部分  */
::-webkit-scrollbar {
}
/* 滾動條裡面滑塊，能上下左右移動(取決于是垂直還是水準) */
::-webkit-scrollbar-thumb {
}
/* 滾動條的軌道(裡面裝有thumb) */
::-webkit-scrollbar-track {
}
/* 滾動條軌道兩端的按鈕，允許通過點選微調小方塊的位置 */
::-webkit-scrollbar-button {
}
/* 内層軌道，滾動條中間部分(除去) */
::-webkit-scrollbar-track-piece {
}
/* 邊角，及兩個滾動條的交彙處  */
::-webkit-scrollbar-corner {
}
/* 兩個滾動條的交彙處上用于拖動調整元素大小的小控件 */
::-webkit-resizer{}
           

2、原生滾動條效果

3、代碼

html:

<div>
	  <p class="col_title">
	    保函類别
	  </p>
	  <div class="cate">
	    <table>
	    ...
	    </table>
	  </div>
</div>
           

css:

.cate {
  max-height: 313px;
  overflow-y: auto;
}
           

2.不顯示滾動條但有滾動效果：

我還沒學插入視訊，就圖檔湊合一下吧

1、效果圖

2、 代碼

::-webkit-scrollbar { 
	width: 0; 
	height:0; 
	/* 或者直接寫下面的樣式 */
	display:none; 
}
           

3.自定義滾動條樣式且隻在div被hover時顯示：

1、 效果圖（此時滑鼠懸浮在表格的div上，截屏時滑鼠箭頭沒顯示）

2、代碼

html部分都一樣，這裡隻放css部分了

.cate {
  max-height: 313px;
  overflow-y: auto;
}
/*滾動條樣式*/
.cate::-webkit-scrollbar {
  width: 8px; 滾動條的寬度
  padding-right: 4px;
  background-color: transparent; 
}
/*滑塊樣式*/
.cate:hover::-webkit-scrollbar-thumb {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background-color: #999;
}
           

3、 學習的 vlog 視訊 1 個

4.不同浏覽器相容問題

1、webkit核心浏覽器

以上幾個示例都是在谷歌浏覽器裡測試的

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

2、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; /**//*滾動條的基本顔色*/ 
           

3、Firefox

隻找到兩個屬性

scrollbar-color 和 scrollbar-width

示例：滾動軌道為綠色，滾動塊為紫色

參考MDN

.scroller {
     width: 100%;
     height: 500px;
     overflow-y: scroll;
     /*第一個顔色是滑塊顔色，第二個顔色是滾動軌道的顔色*/
     scrollbar-color: rebeccapurple green; 
     /*細的軌道*/
     scrollbar-width: thin; 
   }