vue/css滚动条设置（颜色、宽度、滑块设置等）

最新推荐文章于 2024-05-21 17:34:03 发布

刚刚好ā

最新推荐文章于 2024-05-21 17:34:03 发布

阅读量2.3k

点赞数 3

文章标签： css vue.js css3 前端 javascript

原文链接：https://blog.csdn.net/qq_45059900/article/details/127767159

版权

/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 6px; /*对垂直流动条有效*/
    height: 6px; /*对水平流动条有效*/
}
 
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
    border-radius: 4px;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
    /* background-color: rosybrown; */
}
 
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 8px;
    background-color: #DDDEE0;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
}
 
/*定义滑块悬停变化颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb:hover{
    background-color: #C7C9CC;
}
 
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    /* background-color: cyan; */
}
 
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    /* background: khaki; */
}
 
/* 隐藏滚动条 */
/* ::-webkit-scrollbar {
    display: none;
} */