瀏覽器默認(rèn)的滾動(dòng)條樣式非常感人喝噪，追求完美的產(chǎn)品當(dāng)然不會(huì)放過這一細(xì)節(jié)，以下便給出通過CSS修改滾動(dòng)條樣式的代碼吐葵。
谷歌瀏覽器：
/* 修改滾動(dòng)條顏色和寬度 必須的樣式 */
::-webkit-scrollbar {
width: 10px; /* 縱向滾動(dòng)條寬度 */
height: 10px; /* 橫向滾動(dòng)條高度 */
border: 2px solid purple;
border-radius: 5px;
background-color: cadetblue;
}
/* 滑塊樣式 */
::-webkit-scrollbar-thumb {
border: 2px solid #000;
border-radius: 5px;
background: #fff;
}
/* 滾動(dòng)條外層軌道樣式，相同屬性的樣式會(huì)被內(nèi)層軌道樣式遮蓋 */
::-webkit-scrollbar-track {
border: 2px solid gold;
background-color: rgb(25, 214, 25)
}
/* 滾動(dòng)條內(nèi)層軌道樣式 */
::-webkit-scrollbar-track-piece {
border-radius: 5px;
border: 2px solid #fff;
background-color: #000;
}
/* 滾動(dòng)條兩端的按鈕樣式 */
::-webkit-scrollbar-button {
width: 50px;
height: 50px;
border: 2px solid red;
border-radius: 5px;
background: gold;
}
/* 橫向滾動(dòng)條和縱向滾動(dòng)條交匯處樣式 */
::-webkit-scrollbar-corner {
background-color: red;
border: 2px solid green;
border-radius: 5px;
}
IE瀏覽器 也可作出部分修改：
.scroll {
/* 設(shè)置滾動(dòng)條主要構(gòu)成部分的顏色 */
scrollbar-base-color: red;
/* 滑塊顏色 */
scrollbar-face-color: #000;
/* 滑塊邊框 */
scrollbar-shadow-color: red;
/* 設(shè)置滾動(dòng)條兩端箭頭的顏色 */
scrollbar-arrow-color: red;
/* 滾動(dòng)條軌道顏色 */
scrollbar-track-color:green;
/* 設(shè)置滾動(dòng)框的和滾動(dòng)條箭頭左上邊緣的顏色 不生效 */
scrollbar-highlight-color:blue;
/* 設(shè)置滾動(dòng)框的和滾動(dòng)條箭頭左上邊緣的顏色 不生效 */
scrollbar-3dlight-color:blue;
/* 設(shè)置滾動(dòng)條槽的顏色 不生效 */
scrollbar-darkshadow-color:blue;
}
喜歡的小伙伴，隨手留個(gè)贊纬乍，^ _ ^
