So verbergen Sie die Scroll -Stange in CSS

Im Web-Browsen wird die Bildlaufleiste vertikal und horizontal angezeigt, sodass Benutzer nach oben und nach links nach rechts scrollen können. Mit CSS können wir die Attribute der Bildlaufleiste gemäß unserer Wahl festlegen. Zum Beispiel verstecken und modifizieren Sie seine Farbe und Breite. In diesem Artikel lernen wir, wie Sie die Bildlaufleiste mit CSS -Eigenschaften verbergen.

Unter den vielen Möglichkeiten, es zu verbergen, sind die Überlauf- und Webkit-Scrollbar-Eigenschaften am häufigsten.

Hier sind einige praktische Beispiele, in denen wir die Bildlaufleiste mit diesen Eigenschaften verbergen werden.

Also gut, lass uns anfangen!

Die Bildlaufleiste mit der Überlaufeigenschaft in CSS ausblenden

Der "ÜberlaufDie Eigenschaft bestimmt, wie der Inhalt aussehen wird, wenn er aus dem Inhaltsfeld überläuft, beispielsweise durch das Ausschneiden, Anzeigen von Bildlaufleisten oder das Anzeigen außerhalb der Box.

Syntax

In CSS hat die Überlaufeigenschaft die folgende Syntax:

Überlauf: Wert

An der Stelle des Wertes können wir verschiedene Werte/Parameter von Überlaufeigenschaften wie sichtbar, versteckt, scroll, automatisch und erben festlegen. Zuweisen Sie die “verstecktWert für die Überlaufeigenschaft, um die Bildlaufleiste zu verbergen.

Hier ist ein praktisches Beispiel, das dieses Konzept besser veranschaulicht.

Beispiel: So verbergen Sie die Bildlaufleiste in CSS mithilfe der Überlaufeigenschaft?

Erstellen wir einen Absatz im Inneren der Verwendung der

Tag wie folgt:

Wir scrollen nach oben und links rechts der Webseite, während wir im Internet durch die Webseite stöbern. In HTML erscheint es standardmäßig. Mit CSS können wir Attribute der Bildlaufleiste gemäß unserer Wahl festlegen i.E Breite der Bildlaufleiste und Farbe auch. Wir verbergen auch die Bildlaufleiste mit CSS.
Unter den vielen Möglichkeiten, es zu verbergen, sind die Eigenschaften des Überlaufs, der Scrollbar-Breite und der Webkit-Scrollbar.

Das Ergebnis des angegebenen Code ist:

Hier können wir sehen, dass die Bildlaufleiste vertikal erscheint. Verwenden wir die CSS -Überlaufeigenschaft, um sie zu verbergen.

Schreiben Sie in CSS den folgenden Code und setzen Sie die Überlaufeigenschaft auf “versteckt”:

Körper
Überlauf versteckt;

Infolgedessen verschwindet die Bildlaufleiste von der Seite:

Wir können sehen, dass die Bildlaufleiste entfernt wurde, aber die Funktionalität der Scrollbar ist ebenfalls deaktiviert. Durch die Verwendung von CSS können wir die Bildlaufleiste jedoch verbergen, ohne ihre Funktionalität zu deaktivieren.

Die Bildlaufleiste in CSS mit der Eigenschaft "Webkit-S-CROLLBAR" ausblenden

Der "Webkit-Scrollbar”Pseudo-Element kann verwendet werden, um die Bildlaufleiste eines Elements in CSS zu stylen. Es hilft uns auch beim Verstecken der Scrollbar. Diese Eigenschaft funktioniert nur in Webkit-basierten Browsern wie Chrome, Opera, Safari, Edge usw.

Syntax

Um die Webkit -Eigenschaft zu verstehen, müssen wir zunächst ihre Syntax verstehen:

Body ::-Webkit
/ *Anzeige, Breite, Stil */

Webkit verfügt über die folgenden Elemente, die unterschiedlichen Funktionen dienen, einige sind:

• Webkit-Scrollbar: Es wird verwendet, um die gesamte Bildlaufleiste zu modifizieren.
• Webkit-Scrollbar-Button: Es wird verwendet, um die nach links rechten Tasten der Bildlaufleiste zu ändern.
• Webkit-Scrollbar-Track: Es wird verwendet, um die Spur des Scrollens zu ändern.
• Webkit-Scrollbar-Daumen: Es wird verwendet, um den draggierbaren Scroll -Griff zu ändern.
• Webkit-Ressizer: Es wird verwendet, um einen draggablen Griff zu ändern oder zu ändern.

Um die Bildlaufleiste zu verbergen, die “Webkit-ScrollbarPseudoelement wird verwendet.

Beispiel: So verbergen Sie die Scrollleiste in CSS mithilfe der Webkit -Eigenschaft?

Um die Bildlaufleiste mit der "auszublenden" auszublendenWebkit-Scrollbar”Eigenschaft, setzen Sie den Wert der Anzeige auf“keiner" wie nachstehend:

Body ::-Webkit-Scrollbar
Anzeige: Keine;

Auf der Webseite können wir nun durch die lange Webseite scrollen, ohne die Bildlaufleiste zu sehen:

Die Bildlaufleiste wurde versteckt, und Sie können mit den Up-Down-Tasten durch den Browserinhalt scrollen.

Abschluss

Das CSS “Überlauf" Und "WebkitEigenschaften ermöglichen es uns, die Bildlaufleiste vor der Webseite zu verbergen. Die Überlaufeigenschaft deaktiviert auch die Funktionalität des Scrollens; Die Webkit -Eigenschaft ermöglicht jedoch das Scrollen mit Hilfe von Pfeiltasten. In diesem Artikel wurde erläutert, wie Überlaufeigenschaften und Webkit-Eigenschaften in CSS funktionieren.