css美化滚动条

/* 隐藏滚动条 */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}


/* 美化滚动条 */
.overflow-scroll {
    &::-webkit-scrollbar-track-piece {
        border-radius: 0
    }
    &::-webkit-scrollbar {
        width: 5px;
        height: 6px
    }
    &::-webkit-scrollbar-thumb {
        height: 50px;
        background-color: rgba(144, 147, 153, 0.3);
        border-radius: 6px;
        outline-offset: -2px;
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5
    }
    &::-webkit-scrollbar-thumb:hover {
        height: 50px;
        background-color: rgba(144, 147, 153, 0.5);
        border-radius: 6px;
    }
}
上一篇:纯css美化滚动条样式


下一篇:火狐浏览器滚动条样式修改