Javascript Klasse toevoegen op scrollen verwijderen

| | | | | | | | | | | | | | | | | |

Scrollbalken en gebruikerservaring

Gebruikers zijn nu gewend aan enige ervaring bij het browsen op websites. U zou bijvoorbeeld verwachten dat een bedrijfslogo in de linkerbovenhoek van een site u naar de startpagina brengt. Maar wat als het niet werkt? Wat als alles op deze site het tegenovergestelde deed van wat je dacht dat het zou zijn?

Stel je voor dat er een schuifbalk zou zijn, maar wanneer je de schuifknop op je muis of schuif beweegt uw vinger over het touchpad van uw apparaat, er gebeurt niets. Het zou worden beschouwd als een vreselijke gebruikerservaring.

Wat - wat een goede gebruikerservaring maakt of breekt, kan een taak op zich zijn, maar een deel ervan - het werkt zeer zeker capaciteit en balken scrollen om te verbergen om esthetische redenen.

Scrollbalken zijn geweldige indicatoren van wat we kunnen verwachten te zien op een webpagina. Als we een schuifbalk zien, verwachten we dat het nodig is om naar beneden te scrollen om de inhoud te bekijken. Als u geen schuifbalk ziet, heeft dit meestal twee redenen:

  1. Wat u ziet is wat u krijgt - de hoogte en breedte van het zichtbare gebied (het scherm) komen overeen met de hoogte en breedte van de site.
  2. Site-ontwerp omvat een soort pijl of de functie van animatie die laat zien dat hoe meer inhoud beschikbaar is via het scrollen. Pas als u begint te scrollen, verschijnt de schuifbalk. De standaard is om tot die tijd verborgen te blijven.
  3. Als ontwikkelaar zal het implementeren van het juiste gebruik van de schuifbalk de gebruikerservaring van een site verbeteren, waardoor klanten op de site blijven.

Opmerking zijkant: zorg ervoor dat u horizontale schuifbalken gebruikt wanneer u ze opzettelijk wilt gebruiken. Als ze onbedoeld op uw site verschijnen, is dit meestal omdat er iets mis is met de grootte van de componenten. Verberg de horizontale schuifbalken op de doel wanneer ze niet aanwezig zouden moeten zijn.

CSS-implementatie

Het eerste dat opvalt aan deze implementatie is dat alle belangrijke browsers gelijk zijn gemaakt. Wat werkt voor Firefox, werkt niet voor Chrome of Internet Explorer en vice versa. CSS gebruikt wat we providervoorvoegsels of browservoorvoegsels noemen om ons te helpen ondersteuning te bieden voor meerdere browsers. We presenteren ze hieronder:

< br>

Cheat Sheet leverancier prefix

leveranciersvoorvoegsel Browser voor
-webkit- Chrome , Safari, nieuwere versies van Opera en de meeste iOS-browsers, waaronder Firefox voor iOS
-moz - Firefox (niet iOS)
-o- Oudere versies van Opera
-ms- Internet Explorer en MS Edge

URL: credit: MDN - CSS-voorvoegsels

Alt-tekst: Mozilla Developer Network heeft een handig spiekbriefje gemaakt om te onthouden welk voorvoegsel gebruik

Bijschrift: MDN heeft een handig spiekbriefje gemaakt om te onthouden welk voorvoegsel voor de browser moet worden gebruikt

De vraag wordt dan, hoe weten we wanneer we voorvoegsels nodig hebben en wanneer niet? CSS-makers experimenteren altijd met nieuwe eigenschappen en nieuwe manieren om dingen te doen - als er één voldoende nieuwe eigenschap is, is deze waarschijnlijk nog niet compatibel met alle browsers.

Gelukkig zijn er tools die je CSS bekijken en voeg de voorvoegsels toe die u nodig hebt. Je kunt het ook handmatig doen en een site gebruiken zoals caneuse of documenten voor u MDN om de browsercompatibiliteit te helpen bepalen.

Let code

Wanneer we deze code in Chrome uitvoeren, zou deze een grijze achtergrond-div moeten produceren en wat tekst die u kunt doorscrollen. De twee meest voorkomende implementaties zijn inbegrepen - Firefox staat bovenaan de code in de