mt-ui-components-vue3/lib/Scrollbar/style/scrollbar.less

玛果添实UI组件库(Vue3)

@include b(scrollbar) {
    overflow: hidden;
    position: relative;
    height: 100%;

    @include e(wrap) {
        overflow: auto;
        height: 100%;

        @include m(hidden-default) {
            scrollbar-width: none;
            &::-webkit-scrollbar {
                display: none;
            }
        }
    }

    @include e(thumb) {
        position: relative;
        display: block;
        width: 0;
        height: 0;
        cursor: pointer;
        border-radius: inherit;
    }

    @include e(bar) {
        position: absolute;
        right: 2px;
        bottom: 2px;
        z-index: 1;
        border-radius: 4px;

        @include when(vertical) {
            width: 6px;
            top: 2px;

            > div {
                width: 100%;
            }
        }

        @include when(horizontal) {
            height: 6px;
            left: 2px;

            > div {
                height: 100%;
            }
        }
    }
}
.el-scrollbar {
    ::-webkit-scrollbar {
        display: none;
    }
    overflow: hidden;
    position: relative;
    height: 100%;
    .el-scrollbar__wrap {
        overflow: auto;
        height: 100%;
        .hidden-default {
            scrollbar-width: none;
            &::-webkit-scrollbar {
                display: none;
            }
        }
    }
}

.el-scrollbar__bar {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: 4px;
}
.el-scrollbar__bar.is-horizontal {
    height: 6px;
    left: 2px;
    .el-scrollbar__thumb {
        position: relative;
        display: block;
        cursor: pointer;
        border-radius: inherit;
        background-color: #000;
        /*transition: #000;*/
        opacity: var(--el-scrollbar-opacity, 0.3);
        height: 100%;
    }
}
.el-scrollbar__bar.is-vertical {
    width: 6px;
    top: 2px;
    .el-scrollbar__thumb {
        position: relative;
        display: block;
        cursor: pointer;
        border-radius: inherit;
        background-color: #000;
        /*transition: #000;*/
        opacity: var(--el-scrollbar-opacity, 0.3);
    }
}