Rumah > Artikel > hujung hadapan web > Apakah sifat yang disokong oleh Firefox menggunakan css untuk menukar bar skrol?

Apakah sifat yang disokong oleh Firefox menggunakan css untuk menukar bar skrol?

青灯夜游asal: 2022-08-12 17:32:112501semak imbas

Firefox menyokong dua sifat CSS untuk menukar bar skrol: 1. Sifat warna bar skrol digunakan untuk menetapkan warna bar skrol elemen dan boleh mengawal warna trek bar skrol dan ibu jari bar skrol. Sintaks "scrollbar -color:dark|light;"; 2. Atribut scrollbar-width digunakan untuk menetapkan lebar atau ketebalan bar skrol elemen semasa paparan tiada|nilai saiz lebar;".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Satu-satunya atribut css yang boleh digunakan untuk mengubah suai gaya bar skrol Firefox ialah scrollbar-color dan scrollbar-width .

sifat warna bar skrol

sifat warna bar skrol digunakan untuk menetapkan warna bar skrol elemen. Ia boleh digunakan untuk mengawal warna trek bar skrol dan ibu jari bar skrol masing-masing. Jejak bar skrol ialah latar belakang bar skrol, yang kekal tetap dan menunjukkan kawasan yang boleh ditatal. Ibu jari bar skrol merujuk kepada bahagian bar skrol yang bergerak, iaitu nombor titik terapung di bahagian atas trek yang mewakili kedudukan semasa bar skrol.

trek merujuk kepada latar belakang bar skrol, yang biasanya ditetapkan tanpa mengira kedudukan skrol.
Ibu jari ialah bahagian bar skrol yang bergerak yang biasanya terapung di atas trek.

Sintaks:

scrollbar-color:auto | color | dark | light

`auto`	在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。
`dark`	显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。
`light`	显示一个轻量滚动条，可以是平台提供的滚动条的轻微变体，也可以是带有浅色的自定义滚动条。
`<color> <color></color></color>`	将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道。

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

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

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

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

Contoh:

<!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  
    &#39;auto&#39;. 
  </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>

sifat lebar bar skrol digunakan untuk menetapkan lebar atau ketebalan bar skrol elemen apabila ia berada. dipaparkan. Atribut ini boleh digunakan pada halaman di mana antara muka pengguna memerlukan elemen tersebut perlu dipaparkan dengan lebih jelas, dan mengurangkan lebar bar skrol menyediakan lebih banyak ruang untuk elemen.

<!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>

Sintaks: Apakah sifat yang disokong oleh Firefox menggunakan css untuk menukar bar skrol?

Penggunaan: Nilai atribut:

auto: Ia digunakan untuk menetapkan menatal Lebar bar, untuk ditetapkan secara automatik oleh penyemak imbas. Ia adalah nilai lalai.

scrollbar-width:auto | thin | none |len

scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */

scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */

scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */

scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */

nipis: Varian yang lebih nipis untuk menetapkan lebar bar skrol kepada bar skrol lalai .

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

Apakah sifat yang disokong oleh Firefox menggunakan css untuk menukar bar skrol?

tiada: Ia digunakan untuk menyembunyikan bar skrol sepenuhnya, tetapi kandungan masih boleh ditatal.

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

(Belajar perkongsian video: Apakah sifat yang disokong oleh Firefox menggunakan css untuk menukar bar skrol? tutorial video css

)

Atas ialah kandungan terperinci Apakah sifat yang disokong oleh Firefox menggunakan css untuk menukar bar skrol?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 auto 接口

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bolehkah kecerunan jejari css mengubah sudut?Artikel seterusnya：Bolehkah kecerunan jejari css mengubah sudut?

Artikel berkaitan

Lihat lagi