Entfernen Sie das horizontale Scrollbar -CSS
Warum die Bildlaufleiste entfernen??
Obwohl es im Webdesign nicht empfohlen wird, das Standard -Browserverhalten zu ändern, gibt es Zeiten, in denen es notwendig ist. Zum Beispiel kann eine Scrollbar, die auftritt, sobald die Inhaltsüberläufe eines Elements auftreten. Darüber hinaus ist es sinnvoll, die Bildlaufleiste vollständig zu entfernen, da Sie als Webdesigner möglicherweise nicht daran denken, auf einer Webseite zu scrollen. Unabhängig von der Rechtfertigung für CSS-Scrollbar-Versteck sollte die Kompatibilität für Kreuzbrowser berücksichtigt werden. Nachdem Sie die Bildlaufleiste versteckt haben.
Entfernen der Bildlaufleiste in CSS:
Inhalt, der die Grenzen seines Containers übersteigt, können mit dem Überlaufattribut in CSS behandelt werden. Wenn der Inhalt eines Elements größer als der verfügbare Speicherplatz ist, können Sie diese Eigenschaft verwenden, um den Inhalt zu bestimmen, zu verbergen oder zu scrollen. Funktionen für den Umgang mit dem Bildlaufüberlauf in visuellen Medien sind in diesem CSS -Modul enthalten. In CSS tritt ein Überlauf auf, wenn der Inhalt eines Behälters an einem oder mehreren der Kanten des Behälters vorbeikommt. Im Wesentlichen gibt es an, was passiert, wenn der Inhalt eines Elements zu groß ist, um in seinen Blockkontext zu passen.
Die Überflusseigenschaft von CSS unterstützt die folgenden Werte:
Auto: Um eine Scrollbar hinzuzufügen, wird dies jedoch nur, wenn der Inhalt den Bildlaufbereich überschreitet.
sichtbar: Damit Inhalte auch dann angezeigt werden können, wenn er überläuft.
scrollen: Um den Inhalt zu bestimmen und den verbleibenden Inhalt zu sehen, wird eine Scrollbar hinzugefügt.
versteckt: Es wird die sichtbaren Inhalte angezeigt, und die verbleibenden Inhalte werden versteckt.
Clip: Es steckt den Inhalt eines Elements in seine Box.
Wir können die Scrollbar-Werte mit Überlauf-X einstellen, um die horizontale Scrollbar zu steuern, die für die vertikale Scrollbar und den Überlauf beides ist.
Beispiel 01: Verbergen der horizontalen Bildlaufleiste in CSS
Beginnen wir mit dem grundlegenden Beispiel für das Entfernen der Bildlaufleiste von der Webseite mit CSS. Leider gibt es keine bestimmte CSS -Regel. Mit der Verwendung einiger Regeln für Browser-spezifische CSS ist dies immer noch machbar. Wenden Sie das folgende CSS auf den Körper der Webseite (für die vollständige Seite) oder auf ein einzelnes Element an, um die Bildlaufleiste auszublenden oder zu entfernen und die Bildlauffunktionen beizubehalten.
Wie oben zu sehen, können wir verschiedene Möglichkeiten nutzen, um die Bildlaufleisten in verschiedenen Browsern verschwinden zu lassen. Im obigen Beispiel ist das Element ein bestimmter Bereich oder einen bestimmten Selektor, aus dem Sie die Bildlaufleisten entfernen möchten. In diesem Beispiel werden wir eine einfache Beispielseite erstellen, um Ihnen anzuzeigen, wie Sie die horizontale Bildlaufleiste ausblenden können, aber seine Scroll -Funktionalität funktioniert jedoch. Wir erstellen eine Webseitenseite mithilfe> Tags. In diesen Tags erstellen wir Kopf- und Körperelemente, um die Wurzel und den Körper des Elements zu definieren.
Das Attribut 'Anzeige: None' lässt die Balken verschwinden, ohne die Bildlauffunktion zu beeinflussen.
Um die horizontale Bildlaufleiste auszublenden. Dafür werden wir "White-Space: Nowrap" verwenden. Dadurch kann der Text in derselben Zeile bleiben, bis wir das Break -Line -Tag verwenden. In älteren Browsern wie "Internet Explorer" werden wir das "Attribut -ms-Overflow-Stil: None" festlegen. Während wir in modernen Browsern, wie in Firefox. Wenn sich der Inhalt über die horizontalen Grenzen des Block-Level-Elements hinaus erstreckt, bestimmt die Überlauf-X-CSS-Eigenschaft, welche Anzeigen angezeigt werden.
Wir können dasselbe für die Divelemente tun, indem wir Div -Selektoren in CSS verwenden.
Mit dem obigen Code erhalten wir wie folgt eine Webseite:
Wie Sie sehen können, ist dies der gleiche wie der vorherige. Wir haben die DIV stilisiert, indem wir seinen Rand auf 5px feste schwarze, borderradius 5px, Höhe von 150px und Breite des DIV-Behälters auf 300px angeben.
Beispiel 02: Entfernen der Bildlaufleiste und Deaktivierung ihrer Funktionalität in CSS
Durch die CSS -Überlauffunktion kann CSS die Fähigkeit ermöglichen, sowohl die Scrollbar zu verschwinden als auch die Scrollen zu deaktivieren. Der Umgang mit dem Inhalt, der die Grenzen seines Containers überschreitet, wird von diesen Eigenschaften verwaltet. Die horizontale Scrollbar zu verbergen kann hilfreich sein, da horizontales Scrollen oft eine schreckliche Wahl ist. Durch die Verwendung von 'Overflow-X: Hidden' können wir die horizontale Scrollbar verschwinden lassen und horizontales Scrollen stoppen. Wir haben einfach die Regel "Überlauf: Hidden" dem Körper eines Containerelements hinzugefügt, um das Scrollen beim Verwenden dieses Attributs zu stoppen. Dadurch wird das gesamte Material verbergt, das sich über die Grenze des Elements erstreckt.
Durch die Verwendung dieses Codes verschwindet unsere horizontale Bildlaufleiste und wir können nicht nach links oder rechts scrollen.
Wie Sie sehen können, hat die Verwendung von 'Overflow-X: Hidden' die horizontale Bildlaufleiste sowie die Funktionalität nach links oder rechts entfernt.
Um Material anzuzeigen, das die Grenzen des Behälters erweitert, verwenden Sie jedoch Überlauf: Sie sich als Alternative sichtbar.
Wie Sie sehen können, übertrifft das Bild die Grenzen des Containers.
Beispiel 03: Entfernen der horizontalen Bildlaufleiste, bis wir sie benötigen
In einigen Situationen kann das Verstecken der Scrollbar Ihr Design verbessern. In anderen Fällen kann das Löschen dieses Teils der Seite die Benutzererfahrung verschlimmern. Die Mehrheit der Besucher verbindet eine Scrollbar mit der Scrollenaktion. Daher könnte es anderen ungewöhnlich erscheinen, wenn Sie diese Technik auf der gesamten Website anwenden. Darüber hinaus geben Scrollstangen an, wie viel von der Seite noch sichtbar ist. Das Fehlen einer Scrollbar kann abstoßend sein, es sei denn, Sie haben einen weiteren visuellen Hinweis darauf, dass noch mehr Inhalte zu sehen sind. Benutzer -Tests können zeigen, wie sich das Fehlen einer Bildlaufleiste auf die Benutzererfahrung Ihrer Website auswirkt, obwohl in vielen Situationen das Verstecken der Bildlaufleiste, bis der Benutzer mit dem Scrollen beginnt, ein intelligenter Kompromiss ist.
Wenn der Überlauf auf automatisch eingestellt ist, werden die Balken nicht angezeigt, wenn der Inhalt nicht größer ist als die Grenzen des Browserfensters.
Wie Sie sehen können, gibt es keine horizontale Scrollbar, da die Grenze nicht überschritten wurde. Wenn die Grenze überschritten wird, wird die Scrollbar zum Scrollen auf dem Bildschirm angezeigt.
Wie Sie im HTML -Code sehen können, der Inhalt in
ist größer als das vorherige Beispiel, sodass die horizontale Bildlaufleiste unten angezeigt wird.
Die Bildlaufleiste wird von der automatischen Einstellung hinzugefügt, wird jedoch nicht angezeigt, es sei denn, es gibt Inhaltsüberlauf. Infolgedessen erscheint die verdeckte Scrollbar nur bei Bedarf.
Abschluss
Da es die Navigation erleichtert, ist die Scrollbar ein hilfreicher visueller Indikator für die Mehrheit der Besucher. Unter bestimmten Umständen können Sie es jedoch absichtlich verbergen, um Ihr Design zu verbessern oder zu ändern. Mit nur wenigen Prinzipien aus unserem Artikel können Sie CSS verwenden, um die Bildlaufleiste auf einer Seite oder einem HTML -Element zu verbergen. In diesem Tutorial haben wir gelernt, wie man die Bildlaufleiste versteckt und wie diese Funktion in verschiedenen Browsern funktioniert. Nachdem Sie dieses Tutorial abgeschlossen haben, sollten Sie die Bildlaufleisten problemlos selbst entfernen oder ausblenden.