如何美化滚动条

1.如何美化滚动条（一般在移动端使用）

以下就是美化属性，直接写在css公共样式里面

//高度可以写死，也可以写计算属性
<style>
    .main-scroll{
        height: calc(110vh - 210px);
    }

    .main-scroll{
        max-height: 250px;
    }

//美化属性
    .scrollable {
        overflow: auto;
    }
//方块大小
    .scrollable::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .scrollable::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #dddddd;
    }

    .scrollable::-webkit-scrollbar-thumb:hover {
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #a1a1a1;
    }

    .scrollable::-webkit-scrollbar-track {
        border-radius: 5px;
        background: #f6f6f6;
    }
</style>

2.使用情况

//公共类名+自定义类名
<div class="main-scroll scrollable"></div>