CSS 滾動條樣式

1. 概述

1.1 說明

有時候為了美觀會對默認的滾動條樣式通過css去進行美化

1.2 滾動條內容

1.2.1  滾動條外觀查看

　　　　1.可滑動的內容(中間的實體內容)，即滑塊。

　　　　2.滾動條邊框(軌道)，滑塊在此里邊進行滑動，即軌道

1.2.1  滾動條樣式

• • ::-webkit-scrollbar    定義了滾動條整體的樣式
  • ::-webkit-scrollbar-thumb        滑塊部分(滾動條里邊的小方塊，能向上/下或向左/右移動)
  • ::-webkit-scrollbar-track         軌道部分(里邊裝有thumb)

 2. 代碼

　　滾動條兼容Windows和mac

//定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
//定義滑塊 內陰影+圓角
::-webkit-scrollbar-thumb{
  border-radius: 1em;
  background-color: rgba(50,50,50,.3);
}
//定義滾動條軌道 內陰影+圓角
::-webkit-scrollbar-track{
  border-radius: 1em;
  background-color: rgba(50,50,50,.1);
}