火狐支持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)前位置。

track（軌道）是指滾動(dòng)條，其一般是固定的而不管滾動(dòng)位置的背景。
thumb（拇指）是指滾動(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)條。
`<color> <color>`	將第一種顏色應(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)條軌道的顏色 */

示例：

<!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> 
  <h2 style="color:green"> 
    GeeksforGeeks   </h2> 
  <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>

火狐支持css改變滾動(dòng)條的屬性是什么

<!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> 
  <h2 style="color:green"> 
    GeeksforGeeks   </h2> 
  <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>

火狐支持css改變滾動(dòng)條的屬性是什么

scrollbar-width屬性

scrollbar-width 屬性允許開發(fā)者設(shè)置滾動(dòng)條出現(xiàn)時(shí)的厚度

scrollbar-width屬性用于設(shè)置顯示時(shí)元素滾動(dòng)條的寬度或厚度。此屬性可用于以下頁(yè)面上：用戶接口要求元素應(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 等長(zhǎng)度 */

屬性值：

auto:它用于設(shè)置滾動(dòng)條寬度，以由瀏覽器自動(dòng)設(shè)置。它是默認(rèn)值。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS | scrollbar-width property</title> 
      
    <style> 
        .scrollbar-auto { 
            scrollbar-width:auto; 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
            overflow-y:scroll; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks     </h2> 
      
    <b>CSS | scrollbar-width</b> 
      
    <p>scrollbar-width: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>

火狐支持css改變滾動(dòng)條的屬性是什么

thin:用于將滾動(dòng)條的寬度設(shè)置為默認(rèn)滾動(dòng)條的更薄的變體。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS | scrollbar-width</title> 
      
    <style> 
        .scrollbar-thin { 
            scrollbar-width:thin; 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
            overflow-y:scroll; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks     </h2> 
      
    <b>CSS | scrollbar-width</b> 
      
    <p>scrollbar-width:thin</p> 
      
    <div class="scrollbar-thin"> 
        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>

火狐支持css改變滾動(dòng)條的屬性是什么

none:它用于完全隱藏滾動(dòng)條，但是內(nèi)容仍可滾動(dòng)。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>CSS | scrollbar-width</title> 
      
    <style> 
        .scrollbar-none { 
            scrollbar-width:none; 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
            overflow-y:scroll; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks     </h2> 
      
    <b>CSS | scrollbar-width</b> 
      
    <p>scrollbar-width:none</p> 
      
    <div class="scrollbar-none"> 
        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>

火狐支持css改變滾動(dòng)條的屬性是什么

讀到這里，這篇“火狐支持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è)資訊頻道。

本文標(biāo)題：火狐支持css改變滾動(dòng)條的屬性是什么
網(wǎng)站路徑：http://muchs.cn/article16/pioidg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、定制開發(fā)、網(wǎng)站營(yíng)銷、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容