定义滚动条样式

115 阅读1分钟

定义滚动条样式

<div class="aaa"></div>
// 设置滚动条样式
@mixin scrollBarStyle($color, $size, $trackColor: #ECEEEF) {
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba($color, 0.3);
        border-radius: 10px;
        background-color: $trackColor;
    }
    
    &::-webkit-scrollbar {
        // 宽高不一致会到导致elementUI table 列fixed时无法对齐
        width: $size;
        height: $size;
        background-color: transparent;
    }
    
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 8px rgba($color, .3);
        border-radius: 10px;
        background-color: $color;
    }
}
.aaa {
    /*添加滚动条样式*/
    @include scrollBarStyle(#ccc, 4px);
}

image.png