滚动条宽度 css3滚动条样式及美化方法

首先，更改浏览器默认滚动条样式

::-WebKit-scroll bar-track-piece {//滚动条凹槽的颜色，也可以设置边框属性

背景色:# f8f8f8

}

::-webkit-scrollbar {//滚动条的宽度

宽度:9px

高度:9px

}

::-webkit-scrollbar-thumb {//滚动条设置

背景色:# 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是一个高性能的滚动条美化jQuery插件。滚动条美化插件支持水平和垂直滚动条、鼠标滚动、键盘滚动和移动触摸屏。

Bower或nmp安装滚动条美化插件

JQuery和JQuery . mccustomscroll bar . concat . min . js和jquery.mCustomScrollbar.css files文件。

要初始化的Js

要初始化的HTML

使用data-mcs-axis属性设置滚动条是水平还是垂直，值是x还是y。

水平滚动条

水平和垂直滚动条