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

滚动条的属性是什么?

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

关键词： 滚动条的属性是什么 滚动条属性 滚动条样式 滚动条样式如何修改

推荐DIY文章

主机存在磨损或划痕风险 PICO4便携包宣布召回

穿越湖海！特斯拉Cybertruck电动皮卡可以当“船”用

vivoXFold+折叠旗舰开售 配备蔡司全焦段旗舰四摄

飞凡R7正式上市 全系标配换电架构

中兴Axon30S开售 拥有黑色蓝色两款配色

荣耀MagicBookV14 2022正式开售 搭载TOF传感器