火狐支持css改变滚动条的属性是什么

本文小编为大家详细介绍“火狐支持css改变滚动条的属性是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“火狐支持css改变滚动条的属性是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联于2013年创立，先为宏伟等服务建站，宏伟等地企业，进行企业商务咨询服务。为宏伟企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

火狐支持的改变滚动条的CSS属性有两个：1、scrollbar-color属性，用于设置元素滚动条的颜色，可控制滚动条轨道和滚动条拇指的颜色，语法“scrollbar-color:color|dark|light;”；2、scrollbar-width属性，用于设置显示时元素滚动条的宽度或厚度，语法“scrollbar-width:thin|none|宽度大小值;”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

修改火狐滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 。

scrollbar-color属性

scrollbar-color属性用于设置元素滚动条的颜色。它可用于分别控制滚动条轨道和滚动条拇指的颜色。滚动条的轨迹是滚动条的背景，它保持固定并显示可以滚动的区域。滚动条的拇指指的是滚动条的移动部分，该部分浮点数在轨道的顶部，表示滚动条的当前位置。

• track（轨道）是指滚动条，其一般是固定的而不管滚动位置的背景。

• thumb（拇指）是指滚动条通常漂浮在轨道的顶部上的移动部分。

语法：

scrollbar-color:auto | color | dark | light

scrollbar-color: auto; /* 使用浏览器默认的滚动条样式 */

scrollbar-color: dark; /* 使用浏览器默认的深色或者黑色滚动效果 */

scrollbar-color: light; /* 使用浏览器默认的浅色滚动效果 */

scrollbar-color: red #00f; /* 第一个颜色为滚动条的颜色， 第二个颜色为滚动条轨道的颜色 */

示例：

 
 
 
   
   
 
 
   
    GeeksforGeeks    
   
    CSS | scrollbar-color    
  
 
    The container below has     scrollbar-color set to  
    'auto'. 
  
 
   
    GeeksforGeeks is a computer science     portal with a huge variety of well     written and explained computer science     and programming articles, quizzes and     interview questions. The portal also     has dedicated GATE preparation and     competitive programming sections.