Maison > Article > interface Web > Quels attributs Firefox prend-il en charge en utilisant CSS pour modifier la barre de défilement ?

Quels attributs Firefox prend-il en charge en utilisant CSS pour modifier la barre de défilement ?

青灯夜游original: 2022-08-12 17:32:112510parcourir

Firefox prend en charge deux propriétés CSS pour modifier la barre de défilement : 1. La propriété scrollbar-color est utilisée pour définir la couleur de la barre de défilement de l'élément et peut contrôler la couleur de la piste de la barre de défilement et du pouce de la barre de défilement. -color:color |dark|light;"; 2. L'attribut scrollbar-width est utilisé pour définir la largeur ou l'épaisseur de la barre de défilement de l'élément lorsqu'il est affiché. La syntaxe est "scrollbar-width:thin|none|width size value; ".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les seules propriétés CSS qui peuvent être utilisées pour modifier le style de la barre de défilement de Firefox sont scrollbar-color et scrollbar-width. scrollbar-color 和 scrollbar-width 。

scrollbar-color属性

scrollbar-color属性用于设置元素滚动条的颜色。它可用于分别控制滚动条轨道和滚动条拇指的颜色。滚动条的轨迹是滚动条的背景，它保持固定并显示可以滚动的区域。滚动条的拇指指的是滚动条的移动部分，该部分浮点数在轨道的顶部，表示滚动条的当前位置。

track（轨道）是指滚动条，其一般是固定的而不管滚动位置的背景。
thumb（拇指）是指滚动条通常漂浮在轨道的顶部上的移动部分。

语法：

scrollbar-color:auto | color | dark | light

attribut scrollbar-color

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

l'attribut scrollbar-color est utilisé pour définir la couleur de la barre de défilement de l'élément. Il peut être utilisé pour contrôler respectivement la couleur de la piste de la barre de défilement et du pouce de la barre de défilement. La piste de la barre de défilement est l'arrière-plan de la barre de défilement, qui reste fixe et montre la zone qui peut défiler. Le pouce de la barre de défilement fait référence à la partie mobile de la barre de défilement, qui est un nombre à virgule flottante en haut de la piste qui représente la position actuelle de la barre de défilement.

Quels attributs Firefox prend-il en charge en utilisant CSS pour modifier la barre de défilement ?

track fait référence à la barre de défilement, qui est généralement fixe quel que soit l'arrière-plan de la position de défilement.

Quels attributs Firefox prend-il en charge en utilisant CSS pour modifier la barre de défilement ?

Le pouce fait référence à la partie mobile de la barre de défilement qui flotte généralement au-dessus de la piste. Syntaxe :

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

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

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

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

auto code>

En l'absence de toute autre propriété de couleur de barre de défilement associée, la partie piste de la barre de défilement est rendue par la plate-forme par défaut.

dark

Affiche une barre de défilement noire, qui peut être une variante sombre de la barre de défilement fournie par la plateforme ou une barre de défilement personnalisée avec une couleur sombre.

light

Affiche une barre de défilement légère, soit une légère variante de la barre de défilement fournie par la plateforme, soit une barre de défilement personnalisée avec une couleur claire.

<color> <color></color></color>

Quels attributs Firefox prend-il en charge en utilisant CSS pour modifier la barre de défilement ? Appliquez la première couleur au pouce de la barre de défilement et la deuxième couleur à la piste de la barre de défilement. La propriété scrollbar-width permet aux développeurs de définir l'épaisseur de la barre de défilement lorsqu'elle apparaît.

Syntaxe :

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

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

Valeur d'attribut : Quels attributs Firefox prend-il en charge en utilisant CSS pour modifier la barre de défilement ?

auto : Il est utilisé pour définir la largeur de la barre de défilement à définir automatiquement par le navigateur. C'est la valeur par défaut.

scrollbar-width:auto | thin | none |len

Quels attributs Firefox prend-il en charge en utilisant CSS pour modifier la barre de défilement ?

thin : Utilisé pour définir la largeur de la barre de défilement sur une variante plus fine de la barre de défilement par défaut.

🎜

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

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

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

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

🎜🎜🎜🎜🎜🎜none : Il est utilisé pour masquer complètement la barre de défilement, mais le contenu peut toujours défiler. 🎜🎜🎜

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

🎜🎜🎜🎜 (Partage vidéo d'apprentissage : 🎜tutoriel vidéo CSS🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 auto 接口

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le dégradé radial CSS peut-il changer l'angle ?Article suivant：Le dégradé radial CSS peut-il changer l'angle ?

Articles Liés

Voir plus