控件滚动条优化

一、针对body出现的滚动条

/*直接在最外层的页面内添加以下css*/

::-webkit-scrollbar{
        width: 1px; /*宽分别对应竖滚动条的尺寸*/
        height: 1px; /*高分别对应横滚动条的尺寸*/
        border-radius: 5px;
    }

::-webkit-scrollbar-track { /*滚动条里面轨道*/
        background-color: #fff;
    }
::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        background-color: #ccc;
    }

::-webkit-scrollbar-button {
        display: none; /*滚动条按钮不显示*/
    }

 二、针对控件出现的滚动条

 能用来模拟Select 的标签多样，这里用 无序列表和  select2 插件来模拟一个带查询功能的下拉框

	
请选择归属公司
        
李荣庆
	
王德福
	
赵成
	
赵成
	
李荣庆
	
王德福
	
赵成
	
赵成

                                                         

控件模拟完成，但是发现通过   overflow:auto 属性后出现的滚动条和控件风格不协调，这里就需要进行优化，

上面是优化前端滚动条样式,我们通过css 来改变它，

步骤：

1、首先要找到是哪个标签出现的滚动条，这里是   select2-area-results

2、编写css 样式

/*滚动条样式*/ 
#select2-area-results::-webkit-scrollbar{
        width: 1px; /*宽分别对应竖滚动条的尺寸*/
        height: 1px; /*高分别对应横滚动条的尺寸*/
    }

/*滚动条里面轨道
 *就是滚动条滑动的容器
 */
#select2-area-results::-webkit-scrollbar-track {
        background-color: #fff;
    }

/*滚动条里面小方块
 *就是可以滑动的控件
 */
#select2-area-results::-webkit-scrollbar-thumb { 
        background-color: #ccc;
    }

/*
*滚动条上下两侧的箭头按钮
*/
#select2-area-results::-webkit-scrollbar-button {
        display: none;/*滚动条按钮不显示*/ 
    }

优化后效果：

                                                     

优化后整体感更强，滚动条的宽度、高度和两边的箭头按钮以及颜色都是可调属性，具体需要优化成什么样子根据需求来修改样式即可