vue中滚动条样式调整

最新推荐文章于 2024-07-25 08:14:42 发布

北寂.

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量1k

点赞数

文章标签： css css3 html

本文链接：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;
} */