首先，更改瀏覽器默認(rèn)滾動條樣式
::-WebKit-scroll bar-track-piece {//滾動條凹槽的顏色，也可以設(shè)置邊框?qū)傩?/p>
背景色:# f8f8f8
}
::-webkit-scrollbar {//滾動條的寬度
寬度:9px
高度:9px
}
::-webkit-scrollbar-thumb {//滾動條設(shè)置
背景色:# dddddd
背景剪輯:填充框；
最小高度:28px
}
::-webkit-scrollbar-thumb:hover {
背景色:# bbb
}
其次，給div.test1添加滾動條樣式。
. test1::-webkit-scrollbar {
寬度:8px
}
. test1::-web kit-scroll bar-track {
背景色:紅色；
-web kit-border-radius:2em；
-moz-border-radius:2em；
邊界半徑:2em
}
. test1::-web kit-scroll bar-thumb {
背景色:綠色；
-web kit-border-radius:2em；
-moz-border-radius:2em；
邊界半徑:2em
}
第三，麻栗虎
Malihu是一個(gè)高性能的滾動條美化jQuery插件。滾動條美化插件支持水平和垂直滾動條、鼠標(biāo)滾動、鍵盤滾動和移動觸摸屏。
Bower或nmp安裝滾動條美化插件
JQuery和JQuery . mccustomscroll bar . concat . min . js和jquery.mCustomScrollbar.css files文件。
要初始化的Js
要初始化的HTML
使用data-mcs-axis屬性設(shè)置滾動條是水平還是垂直，值是x還是y。
水平滾動條
水平和垂直滾動條
1.《設(shè)置滾動條樣式 css3滾動條樣式及美化方法》援引自互聯(lián)網(wǎng)，旨在傳遞更多網(wǎng)絡(luò)信息知識，僅代表作者本人觀點(diǎn)，與本網(wǎng)站無關(guān)，侵刪請聯(lián)系頁腳下方聯(lián)系方式。
2.《設(shè)置滾動條樣式 css3滾動條樣式及美化方法》僅供讀者參考，本網(wǎng)站未對該內(nèi)容進(jìn)行證實(shí)，對其原創(chuàng)性、真實(shí)性、完整性、及時(shí)性不作任何保證。
3.文章轉(zhuǎn)載時(shí)請保留本站內(nèi)容來源地址，http://f99ss.com/guoji/1794684.html