滚动条的属性是什么?滚动条样式如何修改?
滚动条的属性是什么?
1、::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。
(资料图片)
2、::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
3、::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
4、::-webkit-scrollbar-track-piece :内层轨道,需要注意的就是它会覆盖第三个属性的样式。
5、::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分
6、::-webkit-scrollbar-corner :边角,两个滚动条交汇处
7、::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
滚动条样式如何修改?
1、 创建一个新的html文件,名为CssOverFlow.html(如果有一个html编辑工具,使用它来创建它。如果没有工具,可以先创建一个文本文件,然后修改文件名。)
2、 【默认溢出样式】代码如下(当外层的高度和宽度小于内部内容的高度和宽度,并且设置了overflow:auto时,会生成一个滚动条)。
3、 【默认溢出样式】操作效果如下(水平和垂直生成滚动条)。
4、 【修改溢出样式】代码如下(修改滚动条宽度、背景颜色等样式)。
5、 【修改溢出样式】操作效果如下(宽度缩小,背景颜色改变)。
6、 只要使用水平滚动条,垂直滚动条就隐藏,使用代码:overflow-x:auto;溢出-y:隐藏
7、 只要使用垂直滚动条,水平滚动条就隐藏,使用代码:overflow-x:hidden;溢出-y:自动