css 好看滚动条样式大全,CSS 个性化滚动条样式

页面中有许多内容过多时，为了不影响整体布局，总会有滚动效果代替。but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊，怎么办，当然作为界面的化妆师CSS就出手啦~

滚动条样式由多个伪类组成 下面是我的小栗子

::-webkit-scrollbar{width: 10px;height: 10px;background: #013b8e;}

/* 滚动槽 */

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(33,68,124,1);

border-radius: 10px;

background: #021b49;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb{

border-radius: 10px;

background: #013b8e;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

background: #013b8e;

}

/* 边角 即两个滚动条的交汇处 */

::-webkit-scrollbar-corner{

background: #021b49;

border-radius: 10px;

}

/* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件*/

::-webkit-resizer{

}

效果图

CSS设置滚动条样式

因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

CSS设置滚动条样式[转]

原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...

转载自前端开发：CSS设置滚动条样式

浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是 ...

CSS自定义滚动条样式