溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2022-08-13 09:35:08 來(lái)源：億速云 閱讀：178 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“火狐支持css改變滾動(dòng)條的屬性是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“火狐支持css改變滾動(dòng)條的屬性是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

火狐支持的改變滾動(dòng)條的CSS屬性有兩個(gè)：1、scrollbar-color屬性，用于設(shè)置元素滾動(dòng)條的顏色，可控制滾動(dòng)條軌道和滾動(dòng)條拇指的顏色，語(yǔ)法“scrollbar-color:color|dark|light;”；2、scrollbar-width屬性，用于設(shè)置顯示時(shí)元素滾動(dòng)條的寬度或厚度，語(yǔ)法“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)部分。

語(yǔ)法：

scrollbar-color:auto | color | dark | light
auto在沒(méi)有任何其他相關(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 屬性允許開(kāi)發(fā)者設(shè)置滾動(dòng)條出現(xiàn)時(shí)的厚度

scrollbar-width屬性用于設(shè)置顯示時(shí)元素滾動(dòng)條的寬度或厚度。此屬性可用于以下頁(yè)面上：用戶接口要求元素應(yīng)更突出地顯示，并且縮小滾動(dòng)條寬度可為元素提供更多空間。

語(yǔ)法：

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í)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手