Bildlaufleiste in CSS ausblenden
-
Setzen Sie
displayaufnonefür das Pseudo-Element::-webkit-scrollbar, um die Bildlaufleiste in CSS auszublenden -
Setzen Sie
scrollbar-widthaufnone, um die Scrollbar in CSS auszublenden
In diesem Tutorial werden einige Methoden zum Ausblenden der Bildlaufleiste in einer Webseite vorgestellt, während die Webseite weiterhin gescrollt wird.
Setzen Sie display auf none für das Pseudo-Element ::-webkit-scrollbar, um die Bildlaufleiste in CSS auszublenden
Wir können den Pseudo-Element-Selektor ::-webkit-scrollbar verwenden, um die Bildlaufleiste des Elements in CSS zu gestalten. Dieser Selektor ist jedoch nur in Webkit-basierten Browsern verfügbar, einschließlich Chrome, Opera, Safari, Edge usw. Wir können das Pseudoelement ::-webkit-scrollbar verwenden, um die gesamte Bildlaufleiste der Webseite auszuwählen und einzustellen die Eigenschaft display auf none. Dadurch können wir durch die lange Webseite scrollen, aber die Bildlaufleiste wird ausgeblendet.
Erstellen Sie beispielsweise eine PHP-Datei und schreiben Sie die grundlegende HTML-Struktur in die Datei. Öffnen Sie im Abschnitt body das PHP-Tag <?php und schreiben Sie den Text Hello World in die Variable $text. Schleife die Variable 100-mal und zeige den Text an. Verwenden Sie in CSS das Pseudoelement ::-webkit-scrollbar, um die Bildlaufleiste auszuwählen. Setzen Sie dann die Eigenschaft display auf none.
Im obigen Beispiel haben wir PHP verwendet, um den Text 100-mal zu durchlaufen, sodass die Webseite lang wird, um durch die Webseite zu scrollen. Der PHP-Code bewirkt, dass der Text Hello World 100 Mal in einer neuen Zeile gedruckt wird. Wenn Sie die display-Eigenschaft auf none setzen, wird die Bildlaufleiste ausgeblendet, sodass wir weiterhin auf der Seite scrollen können. So können wir die versteckte Scrollbar-Funktion erreichen.
Beispielcode:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
::-webkit-scrollbar {
display: none;
}
Setzen Sie scrollbar-width auf none, um die Scrollbar in CSS auszublenden
Wir können die Eigenschaft scrollbar-width verwenden und auf none setzen, um die Scrollbar in CSS auszublenden. Dadurch wird die Bildlaufleiste von der Webseite ausgeblendet. Die andere Option, auto, legt die Standard-Bildlaufleiste fest, und die Option thin lässt die Bildlaufleiste je nach Browser dünner aussehen. Die Eigenschaft funktioniert jedoch nur für den Firefox-Browser. Wir verwenden die Eigenschaft overflow-y, damit die Scrollfunktion den Inhalt abschneidet. Es funktioniert, wenn ein Element auf Blockebene oben und an den Kanten der Schaltflächen überläuft. Wir können dasselbe PHP-Skript wie die erste Methode verwenden, um das Deaktivieren der Bildlaufleiste zu demonstrieren.
Erstellen Sie beispielsweise ein div mit der Klasse container. Schleifen Sie den Text innerhalb des div wie in der ersten Methode. Geben Sie in CSS dem Container eine Hintergrundfarbe sowie eine gewisse Breite und Höhe. Setzen Sie die Eigenschaft scrollbar-width auf none und die Eigenschaft overflow-y auf scroll.
Im Beispiel unten wird die Einstellung der scrollbar-width auf none die Scrollbar ausblenden, und das overflow-y auf scroll setzt die Scrollfunktion am Leben. Auf diese Weise können wir durch eine lange Seite scrollen, die die Bildlaufleiste versteckt.
Beispielcode:
<body>
<div class="container">
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
}
?>
</div>
</body>
.container {
scrollbar-width: none;
background-color: #bbb;
width: 500px;
height: 600px;
overflow-y: scroll;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn