Javascript Hinzufügen Klasse Beim Scrollen Entfernen

| | | | | |

Bildlaufleisten und Benutzererfahrung

Benutzer sind jetzt an eine gewisse Erfahrung beim Surfen auf Websites gewöhnt. Beispielsweise würden Sie erwarten, dass ein Firmenlogo in der oberen linken Ecke einer Website Sie zur Startseite führt. Aber was ist, wenn es nicht funktioniert? Was wäre, wenn alles auf dieser Website entgegengesetzt von dem wäre, was Sie dachten?

Stellen Sie sich vor, es gäbe eine Bildlaufleiste, aber wenn Sie die Bildlauftaste auf Ihrer Maus oder Folie bewegen Wenn Sie Ihren Finger über das Touchpad Ihres Geräts legen, passiert nichts. Es würde als schreckliche Benutzererfahrung angesehen werden.

Was – was eine gute Benutzererfahrung ausmacht oder bricht, kann eine eigene Aufgabe sein, aber ein Teil davon – es funktioniert Aus ästhetischen Gründen werden die Bildlaufleisten auf jeden Fall ausgeblendet.

Bildlaufleisten sind hervorragende Indikatoren dafür, was wir auf einer Webseite zu sehen erwarten können. Wenn wir eine Bildlaufleiste sehen, würden wir erwarten, dass nach unten gescrollt werden muss, um den Inhalt anzuzeigen. Wenn Sie keine Bildlaufleiste sehen, hat dies normalerweise zwei Gründe:

  1. Was Sie sehen, ist das, was Sie bekommen – die Höhe und Breite des sichtbaren Bereichs (des Bildschirms) entsprechen die Höhe und Breite der Website.
  2. Das Website-Design enthält eine Art Pfeil oder die Animationsfunktion, die anzeigt, dass über das Scrollen mehr Inhalte verfügbar sind. Erst wenn Sie mit dem Scrollen beginnen, erscheint der Scrollbalken. Die Standardeinstellung ist, bis dahin ausgeblendet zu bleiben.
  3. Als Entwickler verbessert die Implementierung der korrekten Verwendung der Bildlaufleiste die Benutzererfahrung einer Website, wodurch Kunden auf der Website gehalten werden.

Hinweis Seite: Achten Sie darauf, horizontale Bildlaufleisten zu verwenden, wenn Sie sie absichtlich verwenden möchten. Wenn sie unbeabsichtigt auf Ihrer Website erscheinen, liegt dies normalerweise daran, dass etwas mit der Komponentengröße nicht stimmt . Blenden Sie die horizontalen Bildlaufleisten nicht auf aus Ziel, wenn sie nicht vorhanden sein sollten.

CSS-Implementierung

Das erste, was bei dieser Implementierung zu beachten ist, ist, dass alle gängigen Browser gleich sind. Was für Firefox funktioniert, funktioniert nicht für Chrome oder Internet Explorer und umgekehrt. CSS verwendet sogenannte Anbieter-Präfixe oder Browser-Präfixe , um uns dabei zu helfen, Unterstützung für mehrere Browser bereitzustellen. Wir stellen sie unten vor:

< br>

Spickzettel Lieferantenpräfix

Herstellerpräfix Browserabdeckung
-webkit- Chrome , Safari, neuere Versionen von Opera und die meisten iOS-Browser, einschließlich Firefox für iOS
-moz - Firefox (nicht iOS)
-o- Ältere Versionen von Opera
-ms- Internet Explorer und MS Edge

URL: credit: MDN - CSS Prefixes

Alternativer Text: Das Mozilla Developer Network hat einen praktischen Spickzettel erstellt, um sich an welches Präfix zu erinnern Verwenden Sie

Bildunterschrift: MDN hat einen praktischen Spickzettel erstellt, um sich zu merken, welches Präfix für den Browser verwendet werden soll

Die Frage ist dann, wie Wissen wir, wann wir Präfixe brauchen und wann nicht? CSS-Ersteller experimentieren immer mit neuen Eigenschaften und neuen Vorgehensweisen - wenn es eine genug neue Eigenschaft gibt, ist sie wahrscheinlich noch nicht mit allen Browsern kompatibel.

Glücklicherweise gibt es Tools, die sich Ihr CSS ansehen und fügen Sie die benötigten Präfixe hinzu. Sie können dies auch manuell tun und eine Website wie caneuse oder Dokumente für Ihr MDN, um Ihnen bei der Bestimmung der Browserkompatibilität zu helfen.

Code lassen

Wenn wir diesen Code in Chrome ausführen, sollte er ein graues Hintergrund-Div und etwas Text erzeugen, den Sie anzeigen können durchscrollen. Die beiden gängigsten Implementierungen sind enthalten – Firefox steht ganz oben im Code im