站長資訊網(wǎng)
火狐支持的改變滾動條的CSS屬性有兩個：1、scrollbar-color屬性，用于設(shè)置元素滾動條的顏色，可控制滾動條軌道和滾動條拇指的顏色，語法“scrollbar-color:color|dark|light;”；2、scrollbar-width屬性，用于設(shè)置顯示時元素滾動條的寬度或厚度，語法“scrollbar-width:thin|none|寬度大小值;”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
修改火狐滾動條樣式的css屬性只有 scrollbar-color 和 scrollbar-width 。
scrollbar-color屬性
scrollbar-color屬性用于設(shè)置元素滾動條的顏色。它可用于分別控制滾動條軌道和滾動條拇指的顏色。滾動條的軌跡是滾動條的背景，它保持固定并顯示可以滾動的區(qū)域。滾動條的拇指指的是滾動條的移動部分，該部分浮點數(shù)在軌道的頂部，表示滾動條的當(dāng)前位置。
-
track（軌道）是指滾動條，其一般是固定的而不管滾動位置的背景。
-
thumb（拇指）是指滾動條通常漂浮在軌道的頂部上的移動部分。
語法：
scrollbar-color:auto | color | dark | light
auto |
在沒有任何其他相關(guān)滾動條顏色屬性的情況下，滾動條的軌道部分默認(rèn)平臺渲染。 |
dark |
顯示黑色滾動條，可以是平臺提供的滾動條的深色變體，也可以是帶深色的自定義滾動條。 |
light |
顯示一個輕量滾動條，可以是平臺提供的滾動條的輕微變體，也可以是帶有淺色的自定義滾動條。 |
<color> <color> |
將第一種顏色應(yīng)用于滾動條拇指，第二種顏色應(yīng)用于滾動條軌道。 |
scrollbar-color: auto; /* 使用瀏覽器默認(rèn)的滾動條樣式 */ scrollbar-color: dark; /* 使用瀏覽器默認(rèn)的深色或者黑色滾動效果 */ scrollbar-color: light; /* 使用瀏覽器默認(rèn)的淺色滾動效果 */ scrollbar-color: red #00f; /* 第一個顏色為滾動條的顏色， 第二個顏色為滾動條軌道的顏色 */
示例：
<!DOCTYPE html> <html> <head> <title> CSS | scrollbar-color </title> <style> .scrollbar-auto { scrollbar-color:auto; height:150px; width:200px; overflow-y:scroll; background-color:lightgreen; } </style> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <b> CSS | scrollbar-color </b> <p> The container below has scrollbar-color set to 'auto'. </p> <div class="scrollbar-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. </div> </body> </html>
<!DOCTYPE html> <html> <head> <title> CSS | scrollbar-color </title> <style> .scrollbar-colored { scrollbar-color:red green; height:150px; width:200px; overflow-y:scroll; background-color:lightgreen; } </style> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <b> CSS | scrollbar-color </b> <p> The container below has a red green scrollbar-color. </p> <div class="scrollbar-colored"> 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. </div> </body> </html>
scrollbar-width屬性
scrollbar-width 屬性允許開發(fā)者設(shè)置滾動條出現(xiàn)時的厚度
scrollbar-width屬性用于設(shè)置顯示時元素滾動條的寬度或厚度。此屬性可用于以下頁面上：用戶接口要求元素應(yīng)更突出地顯示，并且縮小滾動條寬度可為元素提供
