526互联

滚动条自定义样式

发布时间 2023-12-04 13:54:52作者: GoForIt0818
        .ant-table-content {
            &::-webkit-scrollbar {
                height: 10px !important;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 0 !important;
            }

            &::-webkit-scrollbar-button {
                display: block;
                background-size: 4px;
                background-repeat: no-repeat;
            }

            /* left */
            &::-webkit-scrollbar-button:horizontal:start:decrement {
                height: 10px;
                width: 15px;
                background-position: center;
                background-image: url('左侧箭头图片地址');
            }

            // 设置“减少滚动值”的箭头仅在左侧展示
            &::-webkit-scrollbar-button:horizontal:end:decrement {
                display: none;
            }

            // 设置“增加滚动值”的箭头仅在右侧展示
            &::-webkit-scrollbar-button:horizontal:start:increment {
                display: none;
            }

            /* Right */
            &::-webkit-scrollbar-button:horizontal:end:increment {
                height: 10px;
                width: 15px;
                background-position: center;
                background-image: url('右侧箭头图片地址');
            }
        }