首先了解控制滚动条样式的几个css属性,如下:
::-webkit-scrollbar 控制滚动条整体的样式;
::-webkit-scrollbar-thumb 控制滑块部分样式;
::-webkit-scrollbar-track 控制轨道部分样式;
::-webkit-scrollbar-button 滚动条的轨道的两端按钮
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
简洁版
全局修改滚动条样式
::-webkit-scrollbar{
background:red;
}
给某一个div添加滚动条样式
<div class="demo" style="overflow-x:auto;with:auto;"></div>
<style>
.demo::-webkit-scrollbar{
background:red;
}
.demo::-webkit-thumb {
background: #898989;
}
</style>
如果要隐藏滚动条可以设置如下:
<div class="demo" style="overflow-x:auto;with:auto;"></div>
<style>
//这种方式用在全局,在局部可以使用display:block;显示局部div的滚动条
.demo::-webkit-scrollbar{
display:none;
}
或者
//这种方式用在全局,将覆盖局部div的滚动条,局部滚动条不可显示
.demo::-webkit-scrollbar{
width:0;
}
</style>