前端調(diào)整滾動(dòng)條的外觀樣式
css主要分三個(gè)步驟
1、設(shè)置滾動(dòng)條寬度::-webkit-scrollbar { width: 5px; }
效果：分別設(shè)置50px和5px寬度
2、設(shè)置里面小滑塊的樣式
::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
不設(shè)置background你將看不到小滑塊，可以通過(guò)background設(shè)置小滑塊的顏色
border-radius設(shè)置小滑塊的圓角
3、設(shè)置導(dǎo)軌的樣式，這一步不是必須文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-555582.html
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
設(shè)置了background導(dǎo)軌樣式
未設(shè)置background的導(dǎo)軌樣式，看不到導(dǎo)軌
box-shadow會(huì)讓導(dǎo)軌顏色更好看一點(diǎn)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-555582.html
到了這里，關(guān)于前端調(diào)整滾動(dòng)條的外觀樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
