首页 > 科技 > 正文

滚动条的属性是什么?滚动条样式如何修改?

2023-04-11 10:01:07来源:迪族网  

滚动条的属性是什么?

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:自动

责任编辑:hnmd003

相关阅读

相关阅读

推荐阅读