Ant design Table 表格组件的横向滚动条样式优化：常显、可拖动！

当设置了表格超出滚动，在 mac 上默认滚动条并不会显示出来，鼠标无法拖拉显示内容，非常影响体验，于是我们通过自定义滚动条样式来实现用户体验的优化！

🎨 效果预览

点击效果可以通过配置 :active 属性来实现

🧑‍💻 样式代码

//表格的横向滚动条
.ant-table-content,
.ant-table-body {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;

    &::-webkit-scrollbar {
        display: block !important;
        width: 7px !important;
        height: 7px !important;
        -webkit-appearance: none !important;
    }

    &::-webkit-scrollbar-track {
        background-color: var(--scrollbar-background-color) !important;
    }

    &::-webkit-scrollbar-thumb {
        cursor: pointer !important;
        border-radius: 6px !important;
        background-color: rgba(0, 0, 0, var(--scrollbar-thumb-opacity, 0.1)) !important;
        transition: all 0.3s !important;
    }

    &::-webkit-scrollbar-thumb:active {
        background-color: rgba(0, 0, 0, var(--scrollbar-thumb-active-opacity, 0.25)) !important;
    }
}