Gewusst wie: Bildlaufleiste ausblenden
Erfahren Sie, wie Sie Bildlaufleisten mit CSS ausblenden.
So verbergen Sie Bildlaufleisten
Hinzufügen overflow: hidden;
, um sowohl die horizontale als auch die vertikale Bildlaufleiste auszublenden.
Beispiel
body {
overflow: hidden; /* Hide scrollbars */
}
Um nur die vertikale Bildlaufleiste oder nur die horizontale Bildlaufleiste auszublenden, verwenden Sie overflow-y
oder overflow-x
:
Beispiel
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Beachten Sie, dass overflow: hidden
dadurch auch die Funktionalität der Bildlaufleiste entfernt wird. Innerhalb der Seite kann nicht gescrollt werden.
Tipp: Um mehr über die overflow
Eigenschaft zu erfahren, gehen Sie zu unserem CSS-Überlauf-Tutorial oder CSS-Überlauf-Eigenschaftsreferenz .
Bildlaufleisten ausblenden, aber Funktionalität beibehalten
Um die Bildlaufleisten auszublenden, aber trotzdem weiter scrollen zu können, können Sie den folgenden Code verwenden:
Beispiel
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Webkit-Browser wie Chrome, Safari und Opera unterstützen das nicht standardmäßige ::-webkit-scrollbar
Pseudo-Element, mit dem wir das Aussehen der Bildlaufleiste des Browsers ändern können. IE und Edge unterstützen die -ms-overflow-style:
Eigenschaft, und Firefox unterstützt die scrollbar-width
Eigenschaft, die es uns ermöglicht, die Bildlaufleiste auszublenden, aber die Funktionalität beizubehalten.