Heim > Artikel > Web-Frontend > Welche Eigenschaften unterstützt Firefox bei der Verwendung von CSS zum Ändern der Bildlaufleiste?

Welche Eigenschaften unterstützt Firefox bei der Verwendung von CSS zum Ändern der Bildlaufleiste?

青灯夜游Original: 2022-08-12 17:32:112367Durchsuche

Firefox unterstützt zwei CSS-Eigenschaften zum Ändern der Bildlaufleiste: 1. Die scrollbar-color-Eigenschaft wird verwendet, um die Farbe der Bildlaufleiste des Elements festzulegen und kann die Farbe der Bildlaufleistenspur und des Bildlaufleisten-Daumens steuern -color:color |dark|light;"; 2. Das Attribut scrollbar-width wird verwendet, um die Breite oder Dicke der Bildlaufleiste des Elements festzulegen, wenn diese angezeigt wird. Die Syntax lautet „scrollbar-width:thin|none|width size value; ".

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die einzigen CSS-Eigenschaften zum Ändern des Firefox-Bildlaufleistenstils sind scrollbar-color und scrollbar-width. scrollbar-color 和 scrollbar-width 。

scrollbar-color属性

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

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

语法：

scrollbar-color:auto | color | dark | light

scrollbar-color-Attribut

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

scrollbar-color-Attribut wird verwendet, um die Farbe der Bildlaufleiste des Elements festzulegen. Es kann verwendet werden, um die Farbe der Bildlaufleistenspur bzw. des Bildlaufleisten-Daumens zu steuern. Die Spur der Bildlaufleiste ist der Hintergrund der Bildlaufleiste, der fest bleibt und den Bereich anzeigt, in dem gescrollt werden kann. Der Daumen der Bildlaufleiste bezieht sich auf den beweglichen Teil der Bildlaufleiste, bei dem es sich um eine Gleitkommazahl oben in der Spur handelt, die die aktuelle Position der Bildlaufleiste darstellt.

Welche Eigenschaften unterstützt Firefox bei der Verwendung von CSS zum Ändern der Bildlaufleiste?

track (Spur) bezieht sich auf die Bildlaufleiste, die im Allgemeinen unabhängig vom Hintergrund der Bildlaufposition fixiert ist.

Welche Eigenschaften unterstützt Firefox bei der Verwendung von CSS zum Ändern der Bildlaufleiste?

Daumen bezieht sich auf den beweglichen Teil der Bildlaufleiste, der normalerweise oben auf der Spur schwebt. Syntax:

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

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

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

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

auto code>

In Ermangelung anderer zugeordneter Farbeigenschaften der Bildlaufleiste wird der Spurbereich der Bildlaufleiste standardmäßig von der Plattform gerendert.

dark

Zeigt eine schwarze Bildlaufleiste an, die eine dunkle Variante der von der Plattform bereitgestellten Bildlaufleiste oder eine benutzerdefinierte Bildlaufleiste mit dunkler Farbe sein kann.

light

Zeigt eine schlanke Bildlaufleiste an, entweder eine leichte Variante der von der Plattform bereitgestellten Bildlaufleiste oder eine benutzerdefinierte Bildlaufleiste mit einer hellen Farbe.

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

Welche Eigenschaften unterstützt Firefox bei der Verwendung von CSS zum Ändern der Bildlaufleiste? Wenden Sie die erste Farbe auf den Bildlaufleisten-Daumen und die zweite Farbe auf die Bildlaufleistenspur an. Mit der Eigenschaft scrollbar-width können Entwickler die Dicke der Bildlaufleiste festlegen, wenn sie angezeigt wird.

Syntax:

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

Attributwert: Welche Eigenschaften unterstützt Firefox bei der Verwendung von CSS zum Ändern der Bildlaufleiste?

auto: Wird verwendet, um die Breite der Bildlaufleiste festzulegen, die automatisch vom Browser eingestellt werden soll. Dies ist der Standardwert.

scrollbar-width:auto | thin | none |len

Welche Eigenschaften unterstützt Firefox bei der Verwendung von CSS zum Ändern der Bildlaufleiste?

thin: Wird verwendet, um die Breite der Bildlaufleiste auf eine dünnere Variante der Standard-Bildlaufleiste festzulegen.

🎜

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

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

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

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

🎜🎜🎜🎜🎜🎜none: Wird verwendet, um die Bildlaufleiste vollständig auszublenden, der Inhalt ist jedoch weiterhin scrollbar. 🎜🎜🎜

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

🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonWelche Eigenschaften unterstützt Firefox bei der Verwendung von CSS zum Ändern der Bildlaufleiste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 auto 接口

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Kann der radiale CSS-Gradient den Winkel ändern?Nächster Artikel：Kann der radiale CSS-Gradient den Winkel ändern?

In Verbindung stehende Artikel

Mehr sehen