自定义滚动条的样式

<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>

给iView的表格的容器使用自定义滚动条

<div class="tableWrapper">
	<Table :columns="columns1" :data="dataOfTable"></Table>
</div>

<style scoped>
	/*滚动条整体样式*/
    .tableStyle::-webkit-scrollbar, .ivu-table-overflowY::-webkit-scrollbar{
	    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
	    height: 4px;
	}
	/*滚动条里面小方块*/
    .tableStyle::-webkit-scrollbar-thumb, .ivu-table-overflowY::-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);
	}
	/*滚动条里面轨道*/
    .tableStyle::-webkit-scrollbar-track , .ivu-table-overflowY::-webkit-scrollbar-track{
	    border-radius: 0;
	}
</style>