NOTE / CSS

網頁捲動軸 scrollbar Style

2017.10.12 / CSS /

CSS

首先介紹捲動軸

::-webkit-scrollbar: 代表整個捲動軸

::-webkit-scrollbar-button: 代表捲動軸上下按鈕

::-webkit-scrollbar-track: 代表捲動軸按鈕按鈕之間由於這個沒按鈕就將就下~

::-webkit-scrollbar-track-piece: 代表捲動軸之間的空白處

::-webkit-scrollbar-thumb: 重點來了這是捲動軸

::-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;
}

REFERENCE / 2

• scrollbars ↗
• scrollbars style ↗