首页 > 技术文章 > 自定义滚动条样式

zy-simpleboy 2021-07-26 15:18 原文

/*滚动条宽 长,滚动条整体部分,其中的属性有width,height,background,border等。*/

::-webkit-scrollbar {
    width: 7px;

}

/*滚动条的滑轨背景颜色,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/

::-webkit-scrollbar-track {
    background-color: (0, 0, 0.2);

    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);

    border-radius: 5px;

}

/* 滑块颜色 */

::-webkit-scrollbar-thumb {
    background-color: rgba(212, 210, 198, 0.781);

    border-radius: 5px;

}

/*滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/

::-webkit-scrollbar-button {
    background-color: rgb(185, 164, 68);

    display: none;

}

/* 横向滚动条和纵向滚动条相交处尖角的颜色 */

::-webkit-scrollbar-corner {
    background-color: black;

}

 

推荐阅读