2024-07-18 使用css美化滚动条

.scrollable-area {
    /* 设置溢出行为，使滚动条出现 */
    overflow-y: scroll;

    /* 针对Webkit内核的浏览器 */
    &::-webkit-scrollbar {
        /* 设置滚动条的宽度 */
        width: 8px;
    }

    /* 滚动条轨道 - 背景颜色/白底 */
    &::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 10px;
    }

    /* 滚动条的滑块部分 */
    &::-webkit-scrollbar-thumb {
        background: rgba(144,147,153,.2);
        border-radius: 10px;
    }

    /* 当鼠标悬停在滚动条滑块上时改变颜色 */
    &::-webkit-scrollbar-thumb:hover {
        background: rgba(144,147,153,.4);
    }
}

• .scrollable-area 是包含滚动条的元素的类名。
• overflow-y: scroll; 确保当内容超出容器高度时，垂直滚动条会显示。
• height: 200px; 给容器设定一个固定高度，以便内容可以溢出并触发滚动条。
• &::-webkit-scrollbar 设置滚动条的整体宽度。
• &::-webkit-scrollbar-track 设置滚动条轨道的样式。
• &::-webkit-scrollbar-thumb 设置滚动条滑块的样式。
• border-radius 可以用来圆化滚动条的边角。

　　注意：以上代码仅适配基于Webkit为内核的浏览器（如Chrome和Safari），并非适配所有浏览器。

修改前：

 修改后：