滚动条默认是隐藏的只有鼠标移上去才会显示

最新推荐文章于 2024-07-19 15:50:46 发布

摸鱼少侠梁先生

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量533

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_51140082/article/details/134144410

版权

效果

在这里插入图片描述

在设置滚动条的类名中写
在这里插入图片描述

/* 滚动条样式 */
    .content-box::-webkit-scrollbar {
        width: 0px; /*  设置纵轴（y轴）轴滚动条 */
        height: 0px; /*  设置横轴（x轴）轴滚动条 */
    }
    /* 滚动条滑块（里面小方块） */
    .content-box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    /* 滚动条轨道 */
    .content-box::-webkit-scrollbar-track {
        border-radius: 0;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.1);
    }
    /* hover时显色 */
    .content-box:hover::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }