火狐支持css改變滾動(dòng)條的屬性是什么
本文小編為大家詳細(xì)介紹“火狐支持css改變滾動(dòng)條的屬性是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“火狐支持css改變滾動(dòng)條的屬性是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。
創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為宏偉等服務(wù)建站，宏偉等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為宏偉企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
火狐支持的改變滾動(dòng)條的CSS屬性有兩個(gè)：1、scrollbar-color屬性，用于設(shè)置元素滾動(dòng)條的顏色，可控制滾動(dòng)條軌道和滾動(dòng)條拇指的顏色，語法“scrollbar-color:color|dark|light;”；2、scrollbar-width屬性，用于設(shè)置顯示時(shí)元素滾動(dòng)條的寬度或厚度，語法“scrollbar-width:thin|none|寬度大小值;”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
修改火狐滾動(dòng)條樣式的css屬性只有 scrollbar-color 和 scrollbar-width 。
scrollbar-color屬性
scrollbar-color屬性用于設(shè)置元素滾動(dòng)條的顏色。它可用于分別控制滾動(dòng)條軌道和滾動(dòng)條拇指的顏色。滾動(dòng)條的軌跡是滾動(dòng)條的背景，它保持固定并顯示可以滾動(dòng)的區(qū)域。滾動(dòng)條的拇指指的是滾動(dòng)條的移動(dòng)部分，該部分浮點(diǎn)數(shù)在軌道的頂部，表示滾動(dòng)條的當(dāng)前位置。
語法：
scrollbar-color:auto | color | dark | light
auto | 在沒有任何其他相關(guān)滾動(dòng)條顏色屬性的情況下，滾動(dòng)條的軌道部分默認(rèn)平臺(tái)渲染。 | dark | 顯示黑色滾動(dòng)條，可以是平臺(tái)提供的滾動(dòng)條的深色變體，也可以是帶深色的自定義滾動(dòng)條。 |
light | 顯示一個(gè)輕量滾動(dòng)條，可以是平臺(tái)提供的滾動(dòng)條的輕微變體，也可以是帶有淺色的自定義滾動(dòng)條。 |
| 將第一種顏色應(yīng)用于滾動(dòng)條拇指，第二種顏色應(yīng)用于滾動(dòng)條軌道。 |
scrollbar-color: auto; /* 使用瀏覽器默認(rèn)的滾動(dòng)條樣式 */
scrollbar-color: dark; /* 使用瀏覽器默認(rèn)的深色或者黑色滾動(dòng)效果 */
scrollbar-color: light; /* 使用瀏覽器默認(rèn)的淺色滾動(dòng)效果 */
scrollbar-color: red #00f; /* 第一個(gè)顏色為滾動(dòng)條的顏色， 第二個(gè)顏色為滾動(dòng)條軌道的顏色 */
示例：
CSS | scrollbar-color
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.
CSS | scrollbar-color
GeeksforGeeks
CSS | scrollbar-color
The container below has a red green scrollbar-color.
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.
scrollbar-width屬性
scrollbar-width 屬性允許開發(fā)者設(shè)置滾動(dòng)條出現(xiàn)時(shí)的厚度
scrollbar-width屬性用于設(shè)置顯示時(shí)元素滾動(dòng)條的寬度或厚度。此屬性可用于以下頁面上：用戶接口要求元素應(yīng)更突出地顯示，并且縮小滾動(dòng)條寬度可為元素提供更多空間。
語法：
scrollbar-width:auto | thin | none |len
用法：
scrollbar-width: auto; /* 使用瀏覽器默認(rèn)的滾動(dòng)寬度 */
scrollbar-width: thin; /* 設(shè)置比默認(rèn)滾動(dòng)條寬度更窄的寬度 */
scrollbar-width: none; /* 隱藏滾動(dòng)條，但是元素還是可以滾動(dòng) */
scrollbar-width: 66px; /* 直接設(shè)置滾動(dòng)條的寬度，比如 60px 3vh 4wh 5rem 6rm 等長度 */
屬性值：
CSS | scrollbar-width property
GeeksforGeeks
CSS | scrollbar-width
scrollbar-width: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.
讀到這里，這篇“火狐支持css改變滾動(dòng)條的屬性是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
