溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS怎么修改滾動條樣式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
CSS怎么修改滾動條樣式,很多做網(wǎng)站開發(fā)的小伙伴,為了體現(xiàn)網(wǎng)頁的個性化美觀,想自定義修改滾動條的樣式。但是不知道怎么操作,下面小編就給你安排!
修改滾動條樣式實現(xiàn)代碼HTML
<divclass="testtest-1"> <divclass="scrollbar"></div> </div>
修改滾動條樣式實現(xiàn)代碼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;/*高寬分別對應(yīng)橫豎滾動條的尺寸*/
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;
}感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS怎么修改滾動條樣式”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼