css如何更改滚动条的默认样式

2019-09-23 20:08:08 阅读：267 来源： 互联网

标签：rgba color 默认滚动条 scrollbar background webkit css

我们常会遇到滚动条的样式需要根据psd设计稿进行修改，如下所示：有两种修改滚动条默认样式的方法。

方法一：

/* 滚动条样式 start */
.jsyzmx .macro-table .res_data::-webkit-scrollbar{
	/*滚动条整体样式*/
	width:10px;
	height:10px;
}
/* 小方块 */
.jsyzmx .macro-table .res_data::-webkit-scrollbar-thumb{
	border-radius:15px;
	-webkit-box-shdow:inset 0 0 15px rgba(172,243,255,1);
	background:rgba(172,243,255,1);
}
/* 轨道 */
.jsyzmx .macro-table .res_data::-webkit-scrollbar-track{
	border-radius:15px;
	-webkit-box-shdow:inset 0 0 15px rgba(24,51,72,1);
	background:rgba(24,51,72,1);
}
/* 滚动条样式 end */

方法二：

/* 滚动条默认样式 */
.list-item-course::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.list-item-course::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(157, 165, 183, 0.7);
}
.list-item-course::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}
.list-item-course::-webkit-scrollbar-thumb:hover {
    background: #888888;	/*鼠标移上滚动条样式*/
}

兼容性问题(IE)：

/* IE比较少，都以颜色为主 */ 

1.scrollbar-arrow-color: color; /三角箭头的颜色/ 
2.scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/ 
3.scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/ 
4.scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/ 
5.scrollbar-shadow-color: color; /立体滚动条阴影的颜色/ 
6.scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/ 
7.scrollbar-track-color: color; /立体滚动条背景颜色/ 
8.scrollbar-base-color:color; /滚动条的基色/

/* 简易版本 */

scrollbar-track-color       /*滚动条里面轨道*/
scrollbar-arrow-color       /* 三角箭头的颜色 */
scrollbar-shadow-color      /* 立体滚动条阴影的颜色 */
scrollbar-face-color        /* 立体滚动条里面小方块 */


/* 核心代码 */
#scroll-2{
    width:200px;
    height:200px;
    overflow:auto;
	margin-bottom: 20px;
}
#scroll-2 div{
	width:400px;
	height:400px;
}
#scroll-2::-webkit-scrollbar{
	width:4px;
	height:4px;
}
#scroll-2::-webkit-scrollbar-track{
	background: #f6f6f6;
	border-radius:2px;
}
#scroll-2::-webkit-scrollbar-thumb{
	background: #aaa;
	border-radius:2px;
}
#scroll-2::-webkit-scrollbar-thumb:hover{
	background: #747474;
}
#scroll-2::-webkit-scrollbar-corner{
	background: #f6f6f6;
}

标签：rgba,color,默认,滚动条,scrollbar,background,webkit,css
来源： https://blog.csdn.net/yanxiaoyang12580/article/details/101221250

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css如何更改滚动条的默认样式