如何自定義瀏覽器滾動條樣式(Webkit內核)

::-webkit-scrollbar{/* 1 */} /*滾動條垂直方向的寬度與水平方向的高度*/ ::-webkit-scrollbar-button{/* 2 */} /*滾動條按鈕*/ ::-webkit-scrollbar-track{/* 3 */} /*滾動條軌道*/ ::-webkit-scrollbar-track-piece{/* 4 */} /*滾動條垂直方向軌道件*/ ::-webkit-scrollbar-thumb{/* 5 */} /*滾動條軌道上的按鈕*/ ::-webkit-scrollbar-corner{/* 6 */} /*滾動條軌道上的滾動角*/

::-webkit-resizer{/* 7 */}/**/

:horizontal//橫向滾動條

:vertical//垂直滾動條

:window-inactive //窗口未激活狀態

...其它

舉例:

::-webkit-scrollbar {

width: 0.2em;

}

::-webkit-scrollbar:horizontal //橫向滾動條樣式

{

height: 0.2em;

}

/* Track */

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

-webkit-border-radius: 10px;

border-radius: 10px;

}

/* Handle */

::-webkit-scrollbar-thumb {

-webkit-border-radius: 10px;

border-radius: 10px;

background: rgba(255,0,0,0.8);

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(169,169,169,0.4);

}

最終效果

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場