滚动条样式-鼠标悬浮才展示滚动条

最新推荐文章于 2025-05-16 12:14:09 发布

原创最新推荐文章于 2025-05-16 12:14:09 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

该代码段展示了如何使用CSS的Webkit内核属性来定制滚动条样式，只有当鼠标悬停时滚动条才会显示。滚动条的宽度和颜色在鼠标悬停状态下会发生变化，提供了更佳的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滚动条样式-鼠标悬浮才展示滚动条

/* 滚动条 */
.overflow-scroll {
    overflow: overlay;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba(102, 102, 102, 0.1);
    }

    &:hover {
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: rgba(170, 170, 170, 0.5);
        }
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba(102, 102, 102, 0.1);

        /* 滚动条里面小方块 */
        border-radius: 6px;
    }
}