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