CSS自定义滚动条样式

最新推荐文章于 2024-08-20 23:22:22 发布

Dwyane、

最新推荐文章于 2024-08-20 23:22:22 发布

阅读量384

点赞数 1

分类专栏： HTML、CSS 文章标签： css less css3 html

本文链接：https://blog.youkuaiyun.com/qq_46007966/article/details/114023320

版权

HTML、CSS 专栏收录该内容

3 篇文章

订阅专栏

效果图1：

第一个 CSS:

.list {
    max-height: 300px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #ccc;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #ededed;
    }
}

第二个 CSS:

.list {
    max-height: 300px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
        );
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #ededed;
    }
}