滚动条自定义样式

小鬼春夏

于 2024-12-19 15:04:09 发布

阅读量240

点赞数 1

文章标签： css css3 javascript

本文链接：https://blog.youkuaiyun.com/m0_62469316/article/details/144586408

版权

并且通过 css的 :hover 来实现移入 ul_box块元素才展示滚动条 
.ul_box{
    list-style: none;
    margin: 0;
    padding: 0;
    height:390px;
    overflow:auto;
}
.ul_box::-webkit-scrollbar {
    width: 5px; /*宽高分别对应横竖滚动条的尺寸*/
    height: 1px;
    cursor: pointer;
    display: none; /* 初始先隐藏，这里针对Chrome等基于webkit内核的浏览器 */
}
.ul_box:hover::-webkit-scrollbar {
    display: block; /* 当鼠标移入.ul_box时显示滚动条 */
}
.ul_box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: gainsboro;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(204, 201, 201, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}