乙個完整滾動條右以下部分組成：
::-webkit-scrollbar 滾動條整體部分，常用屬性：width,height,background,border；::-webkit-scrollbar-button 滾動條兩邊的按鈕，預設不設定時不顯示，可設定高度、背景色、背景；
::-webkit-scrollbar-track 整個滾動條去除兩邊按鈕剩下的部分；
::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分；
::-webkit-scrollbar-thumb 滾動條裡面可以拖動的那部分；
::-webkit-scrollbar-corner 邊角；
::-webkit-resizer 定義右下角拖動塊的樣式
/* 設定整個滾動條的一些屬性，寬度針對垂直滾動條，高度針對水平滾動條 */
::-webkit-scrollbar
/* 整個滾動條去除button剩下的部分 */
::-webkit-scrollbar-track
/* 滾動條可拖拽的部分 */
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover
::-webkit-scrollbar-thumb:active
::-webkit-scrollbar-corner
::-webkit-scrollbar-resizer
.sample
width: 1200px;
height: 1000px;
background: -webkit-linear-gradient(red, blue);
background: linear-gradient(red, blue);
color: white;
}>
class="sample">
>測試滾動示例1>
>測試滾動示例2>
>測試滾動示例3>
>測試滾動示例4>
>測試滾動示例5>
>測試滾動示例6>
>測試滾動示例7>
>測試滾動示例8>
>
>
CSS3自定義瀏覽器滾動條樣式
話不多說直接上 滾動條樣式 webkit scrollbar 滾動條整體樣式 width 4px 高寬分別對應橫豎滾動條的尺寸 height 4px webkit scrollbar thumb 滾動條裡面小方塊 border radius 5px webkit box shadow inset 0...
CSS3自定義滾動條樣式
主要部分 自定義樣式 滾動條整體樣式 transcrided text webkit scrollbar 滾動條滑塊 transcrided text webkit scrollbar thumb 滾動條軌道 transcrided text webkit scrollbar track chrom...
CSS3自定義滾動條樣式
寫在前面 滾動條是個很常見的東東，不過某些瀏覽器自帶的滾動條確實不太好看啊，下面可以作為學習，下自定義滾動條的實現，這樣你的滾動條就可以美美的啦。但是，也只能玩玩，因為只針對webkit核心的瀏覽器啊啊啊啊啊！overflow介紹 定義 overflow 屬性指定當它溢位其塊級容器時,是否剪輯內容，...