css修改滚动条默认样式

责编:menVScode 2020-06-30 9:34 阅读(67)

滚动条默认样式如下图:


先讲解一下滚动条几个属性

    ::-webkit-scrollbar:滚动条整体部分,可以设置宽度啥的

    ::-webkit-scrollbar-button:滚动条两端的按钮

    ::-webkit-scrollbar-track:外层轨道

    ::-webkit-scrollbar-track-piece:内层滚动槽

    ::-webkit-scrollbar-thumb:滚动的滑块

    ::-webkit-scrollbar-corner:边角

    ::-webkit-resizer:定义右下角拖动块的样式


全局设置浏览器滚动条样式

/*滚动条整体样式*/
::-webkit-scrollbar {
    width:10px;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
    background: red;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
    background: #abcdef;
}


局部设置滚动条样式

/*滚动条整体样式*/
div::-webkit-scrollbar {
    width:10px;
}

/*滚动条里面小方块*/
div::-webkit-scrollbar-thumb {
    background: red;
}

/*滚动条里面轨道*/
div::-webkit-scrollbar-track {
    background: #abcdef;
}
标签: 滚动条
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码