這篇文章主要介紹了CSS怎么修改滾動條樣式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
CSS怎么修改滾動條樣式,很多做網站開發的小伙伴,為了體現網頁的個性化美觀,想自定義修改滾動條的樣式。但是不知道怎么操作,下面小編就給你安排!
修改滾動條樣式實現代碼HTML
<divclass="testtest-1"> <divclass="scrollbar"></div> </div>
修改滾動條樣式實現代碼CSS
.test{
width:50px;
height:200px;
overflow:auto;
float:left;
margin:5px;
border:none;
}
.scrollbar{
width:30px;
height:300px;
margin:0auto;
}
.test-1::-webkit-scrollbar{
/*滾動條整體樣式*/
width:10px;/*高寬分別對應橫豎滾動條的尺寸*/
height:1px;
}
.test-1::-webkit-scrollbar-thumb{
/*滾動條里面小方塊*/
border-radius:10px;
box-shadow:inset005pxrgba(0,0,0,0.2);
background:#535353;
}
.test-1::-webkit-scrollbar-track{
/*滾動條里面軌道*/
box-shadow:inset005pxrgba(0,0,0,0.2);
border-radius:10px;
background:#ededed;
}感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS怎么修改滾動條樣式”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
