控件滚动条优化

一、针对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 插件来模拟一个带查询功能的下拉框

<ul class="select2-results__options" role="tree" id="select2-area-results" aria-expanded="true" aria-hidden="false">
	<li class="select2-results__option" role="treeitem" aria-selected="true">请选择归属公司</li>
        <li class="select2-results__option" id="select2-area-result-ljg5-<strong>1</strong>" role="treeitem" aria-selected="false">李荣庆</li>
	<li class="select2-results__option" id="select2-area-result-ammn-<strong>2</strong>" role="treeitem" aria-selected="false">王德福</li>
	<li class="select2-results__option" id="select2-area-result-2afw-<strong>3</strong>" role="treeitem" aria-selected="false">赵成</li>
	<li class="select2-results__option" id="select2-area-result-ak97-<strong>4</strong>" role="treeitem" aria-selected="false">赵成</li>
	<li class="select2-results__option" id="select2-area-result-84ji-<strong>1</strong>" role="treeitem" aria-selected="false">李荣庆</li>
	<li class="select2-results__option select2-results__option--highlighted" id="select2-area-result-dhwq-<strong>2</strong>" role="treeitem" aria-selected="false">王德福</li>
	<li class="select2-results__option" id="select2-area-result-071t-<strong>3</strong>" role="treeitem" aria-selected="false">赵成</li>
	<li class="select2-results__option" id="select2-area-result-r1aq-<strong>4</strong>" role="treeitem" aria-selected="false">赵成</li>
</ul>

                                                         

控件模拟完成，但是发现通过   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;/*滚动条按钮不显示*/ 
    }

优化后效果：

                                                     

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