Greg's Blog

網頁捲動軸 scrollbar Style

: CSS

首先介紹捲動軸


::-webkit-scrollbar: 代表整個捲動軸
scrollbar.PNG
::-webkit-scrollbar-button: 代表捲動軸上下按鈕
scrollbar-button.PNG
::-webkit-scrollbar-track: 代表捲動軸按鈕按鈕之間由於這個沒按鈕就將就下~
scrollbar-track .PNG
::-webkit-scrollbar-track-piece: 代表捲動軸之間的空白處
scrollbar-track-piece .PNG
::-webkit-scrollbar-thumb: 重點來了這是捲動軸
scrollbar-thumb.PNG

::-webkit-scrollbar-corner: 位於右下角的空白處介於overflow-y與overflow-x之間。
::-webkit-resizer: 這是右下角拉取視窗大小地方 以下是捲動軸Style

::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background-color: #555;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

參考資源

Related Posts