Lernen Sie, wie man mit CSS Scrollbalken versteckt.

Kursvorschlag:

Lernen Sie, wie man mit CSS Scrollbalken versteckt.

Wie man Scrollbalken versteckt overflow: hidden;，können Sie sowohl horizontale als auch vertikale Scrollbalken gleichzeitig verstecken.

Beispiel

body {
  overflow: hidden; /* Scrollbalken verstecken */
}

Versuchen Sie es selbst

Um nur die vertikale oder nur die horizontale Scrollbalken zu verstecken, verwenden Sie overflow-y oder overflow-x:

Beispiel

body {
  overflow-y: hidden; /* Vertikale Scrollbalken verstecken */
  overflow-x: hidden; /* Horizontale Scrollbalken verstecken */
}

Versuchen Sie es selbst

Bitte beachten Sie,overflow: hidden Wird auch die Funktion des Scrollbalkens entfernen. Es kann nicht innerhalb der Seite gescrollt werden.

Scrollbalken verstecken, aber Funktion beibehalten

Um die Scrollbalken zu verstecken, aber weiterhin scrollen zu können, können Sie folgenden Code verwenden:

Beispiel

/* Für Chrome, Safari und Opera Scrollbalken verstecken */
.example::-webkit-scrollbar {
  display: none;
}
/* Für IE, Edge und Firefox Scrollbalken verstecken */
.example {
  -ms-overflow-style: none;  /* IE und Edge */
  scrollbar-width: none;  /* Firefox */
}

Versuchen Sie es selbst

Webkit-Browser (wie Chrome, Safari und Opera) unterstützen nicht-standardisierte ::-webkit-scrollbar Pseudo-Element, das uns ermöglicht, das Aussehen des Browser-Scrollbalkens zu ändern. Wird von IE und Edge unterstützt -ms-overflow-style: Eigenschaft, wird von Firefox unterstützt scrollbar-width Eigenschaften, die uns erlauben, die Scrollbalken zu verstecken, aber ihre Funktion beizubehalten.

Verwandte Seiten

Anleitung:CSS 溢出

参考手册：CSS overflow 属性