Beispielcode zum Ausblenden von Element-Bildlaufleisten mithilfe von CSS

Wie kann ich die Bildlaufleisten ausblenden und trotzdem bei jedem Element scrollen können?

Wenn Sie zunächst die Bildlaufleiste ausblenden und bei einem Inhaltsüberlauf anzeigen möchten, müssen Sie dazu nur den Stil „overflow: auto“ festlegen. Wenn Sie die Bildlaufleiste vollständig ausblenden möchten, legen Sie einfach „overflow: hidden“ fest. Dadurch kann der Elementinhalt jedoch nicht mehr gescrollt werden. Bisher gibt es keine CSS-Regel, die es einem Element ermöglicht, die Bildlaufleiste auszublenden und gleichzeitig das Scrollen des Inhalts zu ermöglichen. Dies kann nur erreicht werden, indem der Bildlaufleistenstil für bestimmte Browser festgelegt wird.

Feuerfuchs

Für Firefox können wir die Breite der Bildlaufleiste auf „Keine“ setzen:

Bildlaufleistenbreite: keine; /* Firefox */

Internet Explorer

Für IE müssen wir das Attribut -ms-prefix verwenden, um den Bildlaufleistenstil zu definieren:

-ms-overflow-style: keine; /* IE 10+ */

Chrome- und Safari-Browser

Für die Browser Chrome und Safari müssen wir den CSS-Scrollbar-Selektor verwenden und ihn dann mit display:none ausblenden:

::-webkit-scrollbar {
  Anzeige: keine; /* Chrome Safari */
}

Hinweis: Wenn Sie die Bildlaufleiste ausblenden möchten, stellen Sie die Überlaufanzeige am besten auf „Auto“ oder „Scrollen“, um sicherzustellen, dass der Inhalt gescrollt werden kann.

Beispiel

Wir verwenden die oben genannten CSS-Eigenschaften und den Überlauf, um das folgende Beispiel zu implementieren – Ausblenden der horizontalen Bildlaufleiste, während die vertikale Bildlaufleiste zugelassen wird:

.demo::-webkit-scrollbar {
  Anzeige: keine; /* Chrome Safari */
}
.demo {
  Bildlaufleistenbreite: keine; /* Firefox */
  -ms-overflow-style: keine; /* IE 10+ */
  Überlauf-x: versteckt;
  Überlauf-y: automatisch;
}

Zusammenfassen

Oben sehen Sie den Beispielcode für die Verwendung von CSS zum Ausblenden der Bildlaufleiste von Elementen. Ich hoffe, er ist hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!