@fesjs/fes-design/es/scrollbar/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@scrollbar-prefix-cls: ~'@{cls-prefix}-scrollbar';
@scrollbar-track-cls: ~'@{scrollbar-prefix-cls}-track';
@scrollbar-width: 6px;
@scrollbar-hover-width: 8px;
@scrollbar-bg: var(--f-scrollbar-bg-color);
@scrollbar-active-bg: var(--f-scrollbar-active-color);
@scrollbar-shadow-size: 4px;

.@{scrollbar-prefix-cls} {
    position: relative;
    z-index: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    .@{scrollbar-prefix-cls}-shadow-top {
        .shadow(@scrollbar-shadow-size, 'top')
    }
    .@{scrollbar-prefix-cls}-shadow-bottom {
        .shadow(@scrollbar-shadow-size, 'bottom')
    }
    .@{scrollbar-prefix-cls}-shadow-left {
        .shadow(@scrollbar-shadow-size, 'left')
    }
    .@{scrollbar-prefix-cls}-shadow-right {
        .shadow(@scrollbar-shadow-size, 'right')
    }
    &-container {
        width: 100%;
        height: 100%;
        overflow: auto;
        // 启用硬件加速和平滑滚动
        transform: translate3d(0, 0, 0);
        // 包含优化，减少重排重绘
        contain: layout style paint;
        will-change: scroll-position;
    }
    &-content {
        box-sizing: border-box;
        min-width: 100%;
    }
    &-hidden-native-bar {
        scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }
}

.@{scrollbar-track-cls} {
    position: absolute;
    right: 2px;
    bottom: 2px;
    border-radius: 4px;

    &.is-vertical {
        top: 2px;
        width: @scrollbar-width;
        > div {
            width: 100%;
        }
        &:hover, &.is-hovering {
            width: @scrollbar-hover-width;
        }
    }
    &.is-horizontal {
        left: 2px;
        height: @scrollbar-width;
        > div {
            height: 100%;
        }
        &:hover, &.is-hovering {
            height: @scrollbar-hover-width;
        }
    }

    &-thumb {
        position: relative;
        display: block;
        width: 0;
        height: 0;
        background-color: @scrollbar-bg;
        border-radius: var(--f-border-radius-base);
        cursor: pointer;
        transition: @animation-duration-slow background-color;
    }
    &:hover, &.is-hovering {
        .@{scrollbar-track-cls}-thumb {
            background-color: @scrollbar-active-bg;
            border-radius: var(--f-border-radius-base);
        }
    }
}

.@{scrollbar-track-cls}-fade {
    &-enter-active {
        transition: opacity @animation-duration-slow @ease-base-out;
    }

    &-leave-active {
        transition: opacity @animation-duration-fast @ease-base-out;
    }

    &-enter-from,
    &-leave-active {
        opacity: 0;
    }
}