tntd/lib/style/mixins/scrollbar.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@scrollbar-width: 8px;          // 滚动条基础宽度（Webkit有效，Firefox仅支持thin/none/auto）
@scrollbar-radius: 3px;         // 滚动条圆角
@track-color: transparent;      // 默认轨道颜色（透明更适配不同背景）
@thumb-color: #C9D2DD;          // 默认滑块颜色（浅灰）
@thumb-hover: #8B919E; // 悬停滑块颜色（深灰）

/* 深色主题变量（通过覆盖变量实现主题切换） */
// @dark-track: rgba(255, 255, 255, 0.05);   // 深色轨道
// @dark-thumb: rgba(255, 255, 255, 0.2);    // 深色滑块
// @dark-thumb-hover: rgba(255, 255, 255, 0.3); // 深色悬停

/* 核心滚动条混合（建议添加到需要滚动的容器类） */
.scrollbar-base() {
    /* Firefox兼容 */
    // scrollbar-width: none;  // 仅支持thin/none/auto，thin对应约6px宽度
    /* 关键：防止滚动条占用容器内空间 */
    // box-sizing: border-box;

    /* Webkit内核（Chrome/Safari等） */
    &::-webkit-scrollbar {
        width: @scrollbar-width;   // 垂直滚动条宽度
        height: @scrollbar-width;  // 水平滚动条高度
    }

    &::-webkit-scrollbar-track {
        background: @track-color;
        border-radius: @scrollbar-radius;
        margin: 2px 0;  // 上下留空避免贴边（垂直滚动条）               // 若需要水平滚动条留空可添加 margin: 0 2px;
    }
    &::-webkit-scrollbar-track-piece {
        -webkit-border-radius: 0;
    }

    &::-webkit-scrollbar-thumb {
        height: @scrollbar-width;
        background: @thumb-color;
        border-radius: @scrollbar-radius;
        transition: background 0.2s ease;  // 颜色过渡动画
        cursor: pointer;
    }

    &::-webkit-scrollbar-thumb:hover{
        background: @thumb-hover;  // 直接修改背景色更自然
        opacity: 0.8;
    }

    /* 可选：隐藏滚动条但保留滚动功能（需配合overflow: auto） */
    &.scrollbar-hidden {
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
}