Als er één ding is dat mensen echt willen bij het scrollen, dan is het dat het soepel verloopt. Historisch gezien heeft Chrome op sommige plaatsen soepel gescrolld, bijvoorbeeld wanneer gebruikers met hun trackpads scrollen of een pagina op hun mobiel openen. Maar als de gebruiker een muis heeft aangesloten, krijgt hij een zenuwachtiger “stapsgewijs” scrollgedrag, wat veel minder esthetisch aantrekkelijk is. Dat gaat allemaal veranderen in Chrome 49.
De oplossing voor het getrapte native, invoergestuurde scrollgedrag voor veel ontwikkelaars is het gebruik van bibliotheken, met als doel het opnieuw toe te wijzen aan iets vloeienders en prettiger voor de ogen. Gebruikers doen dit ook via extensies. Er zijn echter nadelen aan zowel bibliotheken als extensies die het scrollen veranderen:
- Een griezelig dalgevoel. Dit manifesteert zich op twee manieren: ten eerste kan de ene site soepel scrollen, maar de andere niet, waardoor de gebruiker zich gedesoriënteerd kan voelen door de inconsistentie. Ten tweede komt de soepelheidsfysica van de bibliotheek niet noodzakelijkerwijs overeen met die van het platform. Dus hoewel de beweging vloeiend kan zijn, kan deze verkeerd of griezelig aanvoelen.
- Verhoogde neiging tot discussie over de hoofdlijn en jank. Zoals bij elk JavaScript dat aan de pagina wordt toegevoegd, zal er een verhoogde CPU-belasting zijn. Dat hoeft niet per se een ramp te zijn, afhankelijk van wat de pagina nog meer doet, maar als er langdurig werk aan de hoofdthread is en het scrollen aan de hoofdthread is gekoppeld, kan het netto resultaat stotterende scrolls en jank zijn.
- Meer onderhoud voor ontwikkelaars, meer code voor gebruikers om te downloaden. Het hebben van een bibliotheek om soepel te scrollen zal iets zijn dat up-to-date moet worden gehouden en onderhouden, en het zal bijdragen aan het totale paginagewicht van de site.
Deze nadelen gelden vaak ook voor veel bibliotheken die zich bezighouden met scrollgedrag, of dat nu parallaxeffecten zijn of andere scroll-gekoppelde animaties. Ze veroorzaken maar al te vaak een fout, staan de toegankelijkheid in de weg en beschadigen over het algemeen de gebruikerservaring. Scrollen is een kerninteractie van internet en het wijzigen ervan met bibliotheken moet met de grootste zorg gebeuren.
In Chrome 49 verandert het standaard scrollgedrag Windows, Linux en ChromeOS. Het oude, stapsgewijze scrollgedrag verdwijnt en het scrollen gaat standaard soepel! Er zijn geen wijzigingen aan uw code nodig, behalve misschien het verwijderen van vloeiend scrollende bibliotheken als u deze heeft gebruikt.
Nog meer scroll-goodies
Er zijn nog andere scroll-gerelateerde goodies in de werken die ook het vermelden waard zijn. Velen van ons willen scroll-gekoppelde effecten, zoals parallaxing, soepel scrollen naar een documentfragment (zoals example.com/ #somesection ). Zoals ik eerder al zei, kunnen de benaderingen die tegenwoordig worden gebruikt vaak schadelijk zijn voor zowel ontwikkelaars als gebruikers. Er wordt gewerkt aan twee platformstandaarden die kunnen helpen: Compositor Worklets en de CSS-eigenschap scroll-behavior .
Houdini
Compositor Worklets maken deel uit van Houdini en moeten nog volledig worden gespecificeerd en geïmplementeerd. Dat gezegd hebbende, als de patches landen , kun je JavaScript schrijven dat wordt uitgevoerd als onderdeel van de pijplijn van de compositor, wat in het algemeen betekent dat scroll-gekoppelde effecten zoals parallaxing perfect synchroon blijven met de huidige scrollpositie. Gezien de manier waarop scrollen tegenwoordig wordt afgehandeld, waarbij scrollgebeurtenissen slechts periodiek naar de hoofdthread worden verzonden (en kunnen worden geblokkeerd door ander hoofdthreadwerk), zou dit een enorme sprong voorwaarts betekenen. Als je geïnteresseerd bent in Compositor Worklets, of een van de andere opwindende nieuwe functies die Houdini met zich meebrengt, bekijk dan het Intro to Houdini-bericht van Surma , de Houdini-specificaties en draag je mening bij aan de Houdini-mailinglijst !
scroll-gedrag
Als het gaat om fragmentgebaseerd scrollen, is de CSS-eigenschap scroll-behavior iets anders dat zou kunnen helpen. Als u het wilt uitproberen, zult u blij zijn te weten dat het al in Firefox wordt geleverd, en dat u het in Chrome Canary kunt inschakelen met behulp van de vlag 'Experimentele webplatformfuncties inschakelen' . Als je bijvoorbeeld het <body> -element instelt op scroll-behavior: smooth , zullen alle scrolls die worden geactiveerd door fragmentwijzigingen of door window.scrollTo soepel worden geanimeerd! Dat is veel beter dan code te moeten gebruiken en onderhouden uit een bibliotheek die hetzelfde probeert te doen. Bij zoiets fundamenteels als scrollen is het erg belangrijk om te voorkomen dat de verwachtingen van de gebruiker worden geschonden. Dus hoewel deze functies in beweging zijn, is het nog steeds de moeite waard om een Progressive Enhancement-aanpak te hanteren en alle bibliotheken te verwijderen die proberen dit gedrag te polyfillen.
Ga heen en scroll
Vanaf Chrome 49 wordt scrollen soepeler. Maar dat is nog niet alles: er zijn nog meer potentiële verbeteringen mogelijk, via Houdini- en CSS-eigenschappen zoals smooth-scroll . Probeer Chrome 49 eens, laat ons weten wat u ervan vindt en laat vooral de browser het scrollen doen waar u kunt!