So fügen Sie eine Bildlaufleiste in CSS hinzu

In CSS können Sie das Overflow-Attribut verwenden, um die Bildlaufleiste festzulegen. Sie müssen dem Element nur den Stil „overflow:scroll“ hinzufügen. Diese Eigenschaft definiert, wie Inhalte behandelt werden, die über den Inhaltsbereich des Elements hinausgehen. Wenn der Wert scroll ist, stellt der Benutzeragent einen Scrollmechanismus bereit, unabhängig davon, ob er erforderlich ist oder nicht.

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

1. Mit dem Überlaufattribut können wir festlegen, ob eine Bildlaufleiste angezeigt wird.

Dieses Attribut definiert, wie Inhalte verarbeitet werden, die über den Inhaltsbereich des Elements hinausgehen. Wenn der Wert scroll ist, stellt der Benutzeragent einen Scrollmechanismus bereit, unabhängig davon, ob er erforderlich ist oder nicht. Daher ist es möglich, dass Bildlaufleisten angezeigt werden, auch wenn alles in die Elementbox passt.

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

overflow-y: Legen Sie fest, wie der Inhalt verwaltet werden soll, wenn der Inhalt des Objekts seine angegebene Höhe überschreitet.

overflow-x: Legen Sie fest, wie der Inhalt verwaltet werden soll, wenn der Inhalt des Objekts seine angegebene Breite überschreitet.

　 Parameter:

　 Sichtbar: Erweitern Sie den Bereich, um alle Inhalte anzuzeigen.

Automatisch: Bildlaufleisten nur hinzufügen, wenn der Inhalt den Grenzwert überschreitet.

Ausgeblendet: Bildlaufleisten immer ausblenden.

Scrollen: Bildlaufleisten immer anzeigen.

, wenn der Inhalt auf Blockebene angezeigt wird Der Bereich überschreitet den Bereich des Elements auf Blockebene. Er wird in Form einer Bildlaufleiste angezeigt. Sie können den Inhalt darin scrollen, und der darin enthaltene Inhalt überschreitet nicht den Bereich auf Blockebene.

2. Verwenden Sie das Bildlaufleisten-Attribut, um den Bildlaufleistenstil festzulegen.

• ::-webkit-scrollbar Der gesamte Teil der Bildlaufleiste Bildlaufleiste

• ::-webkit -scrollbar-track Äußere Spur

• ::-webkit-scrollbar-track-piece Innere Spur, mittlerer Teil der Bildlaufleiste (entfernt)

• ::-webkit -scrollbar-thumb Die Innenseite der Bildlaufleiste kann gezogen werden. Die eine

• ::-webkit-scrollbar-corner Ecke

• ::-webkit-resizer definiert den Stil des Drag-Blocks in der unteren rechten Ecke

• Beispiel:

  /*定义滚动条高宽及背景
   高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar
  {
      width:16px;
      height:16px;
      background-color:#F5F5F5;
  }
  /*定义滚动条轨道
   内阴影+圆角*/
  ::-webkit-scrollbar-track
  {
      -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
      border-radius:10px;
      background-color:#F5F5F5;
  }
  /*定义滑块
   内阴影+圆角*/
  ::-webkit-scrollbar-thumb
  {
      border-radius:10px;
      -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
      background-color:#555;
  }

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo fügen Sie eine Bildlaufleiste in CSS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!