De scroll-behavioreigenschap in CSS stelt ons in staat om te bepalen of de schuiflocatie van de browser naar een nieuwe locatie springt of de overgang vloeiend animeert wanneer een gebruiker op een link klikt die naar een verankerde positie in een schuifvak verwijst.
html ( scroll-behavior: smooth; )Diepere uitleg
Wacht, wacht, wat is dit scrollende vak waar we het over hebben? Het is een element met inhoud die zijn grenzen overschrijdt.
Zie de Pen Scrolling Box van CSS-Tricks (@ css-tricks) op CodePen.
Merk op dat de box in de demo hierboven een vaste hoogte heeft van 200px? Alle inhoud die die hoogte overschrijdt, valt buiten de grenzen van de doos en we hebben toegevoegd overflow-y: scrollom die extra inhoud toegankelijk te maken met verticaal scrollen. Dat is wat we bedoelen met een scrollend vak.
Laten we nu zeggen dat we een navigatie aan de bovenkant van het vak toevoegen, waarbij elke link de drie inhoudssecties target:
Zie de Pen Scrolling Box w / Nav door CSS-Tricks (@ css-tricks) op CodePen.
Elke link brengt de gebruiker rechtstreeks naar de verschillende secties met inhoud in het scrollvak. Standaard is die overgang tussen een abrupte sprong.
Dat soort sprong kan schokkend zijn. Dat is waar het scroll-behavioromkomt en stelt ons in staat om een soepele scroll-overgang in te stellen. Voor dit soort dingen was vroeger fancy Javascript nodig, maar scroll-behaviorhet geeft ons de mogelijkheid om dat native in CSS te doen, zodra de browserondersteuning verbetert.
Syntaxis
.module ( scroll-behavior: ( auto | smooth ); )Waarden
De scroll-behavioreigenschap accepteert twee waarden, die in wezen de functie voor vloeiend scrollen in- en uitschakelen.
auto(standaard): Met deze waarde kan abrupt tussen elementen binnen het scrollvak worden gesprongen.smooth: Trouw aan zijn naam, deze waarde is de vloeiende geanimeerde overgang tussen elementen binnen het scrollvak.
Demo
De volgende demo werkt op het moment van schrijven alleen in Chrome 61+, Firefox 36+ en Opera 48+.
Zie de Pen Scrolling Box met `scroll-gedrag` door CSS-Tricks (@ css-tricks) op CodePen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 61 | 36 | Nee | 79 | Nee |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nee |
Meer informatie
- CSSOM View Module: de conceptspecificatie, inclusief de CSS-eigenschap. Het huidige ontwerp bevat een aanbeveling om de
scroll-behaviornaar een andere specificatie te verplaatsen , dus het zal interessant zijn om te zien waar dat landt. - Mozilla Developer Network: de MDN-referentie voor de specificatie
- Microsoft Edge Platform Status: geeft momenteel de status van deze functie weer als In overweging
- Chrome-platformstatus: toont momenteel de status van deze functie als In ontwikkeling en bevat statussen voor andere platforms terzijde
- Smooth Scrolling Snippet: Fragmenten om soepel scrollen met Javascript en jQuery mogelijk te maken
- Soepel scrollen en toegankelijkheid: een CSS-Tricks-bericht over de impact van Javascript-ingeschakeld soepel scrollen