So deaktivieren Sie die Bildlaufleiste in CSS

CSS (Cascading Style Sheets) ist eine Sprache zum Ausdrucken von Dokumentstilen. Sie bietet viele umfangreiche Stilattribute und Regeln, die uns bei der Gestaltung und Darstellung von Webseiten helfen. Unter diesen ist die Bildlaufleiste ein häufiges Webseitenelement, aber manchmal möchten wir ihre Anzeige abbrechen. In diesem Artikel wird erläutert, wie Sie die Bildlaufleiste mithilfe von CSS abbrechen.

1. Heben Sie die vertikale Bildlaufleiste auf

1. Fügen Sie das Attribut „overflow:hidden“ zum Body-Tag hinzu. Diese Methode ist die einfachste und unkomplizierteste und blendet die vertikale Bildlaufleiste für die gesamte Seite aus.

body {
  overflow-y:hidden;
}

2. Verwenden Sie das Pseudoelement ::-webkit-scrollbar. Diese Methode gilt nur für Webkit-basierte Browser wie Chrome und Safari. Das Pseudoelement ::-webkit-scrollbar kann den Stil der Bildlaufleiste steuern. Wir können seine Breite auf 0 setzen, um die vertikale Bildlaufleiste auszublenden.

body::-webkit-scrollbar {
  width: 0px;
}

3. Pseudoelement ::-ms-scrollbar verwenden. Diese Methode gilt nur für IE-Browser und verwendet eine Methode, die dem Pseudoelement der Webkit-Bildlaufleiste ähnelt. Wenn Sie die Breite auf 0 setzen, wird die vertikale Bildlaufleiste ebenfalls ausgeblendet.

body::-ms-scrollbar {
  width: 0px;
}

2. Deaktivieren Sie die horizontale Bildlaufleiste

1. Fügen Sie das Attribut overflow-x:hidden zum Body-Tag hinzu. Diese Methode ähnelt dem Aufheben der vertikalen Bildlaufleiste, wodurch die horizontale Bildlaufleiste für die gesamte Seite ausgeblendet wird.

body {
  overflow-x:hidden;
}

2. Verwenden Sie das Pseudoelement ::-webkit-scrollbar-horizontal. Dieses Pseudoelement wirkt sich nur auf die horizontale Bildlaufleiste aus. Sie können seine Breite auch auf 0 setzen, um die horizontale Bildlaufleiste auszublenden.

body::-webkit-scrollbar-horizontal {
  height: 0px;
}

3. Use::-ms-scrollbar-horizontal Pseudoelement. Der IE-Browser unterstützt auch das Ausblenden der horizontalen Bildlaufleiste. Verwenden Sie einfach eine ähnliche Methode wie oben, um deren Breite zu steuern.

body::-ms-scrollbar-horizontal {
  height: 0px;
}

3. Den Bildlaufleistenpfeil abbrechen

Zusätzlich zum Ausblenden der Bildlaufleiste selbst müssen Sie manchmal auch den Bildlaufleistenpfeil ausblenden (auch „ die Scrollbar-Schaltfläche ). Hier sind einige Möglichkeiten, dies zu tun.

1. Verwenden Sie das Pseudoelement ::-webkit-scrollbar-button. Dieses Pseudoelement steuert die Pfeilschaltflächen auf der Bildlaufleiste, die ausgeblendet werden kann, indem man sie transparent macht.

body::-webkit-scrollbar-button {
  background-color: transparent;
}

2. Verwenden Sie das Pseudoelement ::-ms-scrollbar-button. Internet Explorer unterstützt auch Pseudoelementmethoden zum Ausblenden von Bildlaufleistenpfeilen.

body::-ms-scrollbar-button {
  background-color: transparent;
}

4. Abbrechen der Bildlaufleistenspur

Die Bildlaufleistenspur bezieht sich auf eine Zeile neben der Bildlaufleiste und ist auch der Bereich, den der Benutzer einsehen kann ziehen. Hier sind einige Möglichkeiten, Bildlaufleistenspuren zu deaktivieren.

1. Verwenden Sie das Pseudoelement ::-webkit-scrollbar-track. Dieses Pseudoelement kann uns helfen, das Ein- und Ausblenden der Bildlaufleistenspur zu steuern.

body::-webkit-scrollbar-track {
  background-color: transparent;
}

2. Verwenden Sie das Pseudoelement ::-ms-scrollbar-track. Ebenso unterstützt der IE-Browser auch das Ausblenden von Bildlaufleistenspuren.

body::-ms-scrollbar-track {
  background-color: transparent;
}

Zusammenfassung

Die oben genannten Möglichkeiten sind mehrere Möglichkeiten, Bildlaufleisten mithilfe von CSS abzubrechen. Natürlich kann die Kompatibilität dieser Methoden in verschiedenen Browsern unterschiedlich sein, und wir müssen eine Auswahl und Anpassung auf der Grundlage spezifischer Umstände treffen. In praktischen Anwendungen müssen wir auch Faktoren wie Seitendesign, Benutzererfahrung und Browserkompatibilität umfassend berücksichtigen, um zu entscheiden, ob wir diese Methoden verwenden.

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