自定义滚动条的样式

<div class="wrapper">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Nulla vitae modi rerum natus numquam id ut harum aperiam. 
        Aliquid illo ad eaque dolores quibusdam quaerat dolorum, 
        consequuntur maiores odio sint?
    </div>
</div>

<style>
    .wrapper {
        width:100px;
        height: 100px;
        overflow-y: scroll; /* 溢出部分滚动条展示 */
    }
    .content {
        width:100px;
        height: 1000px;
        background-color: cornflowerblue;
    }
    /*滚动条整体样式*/
    .wrapper::-webkit-scrollbar {
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    }
    /*滚动条里面小方块*/
    .wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    height: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(180,180,180,0.2);
    }
    /*滚动条里面轨道*/
    .wrapper::-webkit-scrollbar-track {
    border-radius: 0;
    }
</style>