css 自定义滚动条样式

<div class="content-wrap">
    <div>
        内容XXXX
    </div>

</div>


<style>

// content-wrap样式
.content-wrap {
    flex: 1;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 10px 0;

    &.content-wrap {
        /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
        -ms-overflow-style: none;
        /*火狐下隐藏滚动条*/
        overflow: -moz-scrollbars-none;
    }

    &.content-wrap::-webkit-scrollbar {
        width: 20px;  // 控制滚动条宽度
        //width: 0;
        height: auto;
    }

    &.content-wrap::-webkit-scrollbar-track {
        background: rgb(221, 16, 16); // 控制滚动条背景颜色
        //background: rgb(239, 239, 239)
        border-radius: 4px;
    }

    &.content-wrap::-webkit-scrollbar-thumb {
        background: #bfbfbf; // 控制滚动条颜色
        border-radius: 10px;
    }

    &.content-wrap::-webkit-scrollbar-thumb:hover { // 鼠标移入滚动条时的颜色变化
        background: #888;