Den scroll-behavioregendom i CSS tillåter oss att definiera om rullnings platsen för webbläsaren hoppar till en ny plats eller smidigt animeras övergången när en användare klickar på en länk som mål en förankrad position inom en rullande låda.
html ( scroll-behavior: smooth; )Djupare förklaring
Vänta, vänta, vad är det här rullningsruta vi talar om? Det är ett element med innehåll som överskrider dess gränser.
Se pennan Scrolling Box av CSS-Tricks (@ css-tricks) på CodePen.
Lägg märke till hur rutan i demo ovan har en fast höjd på 200px? Allt innehåll som överstiger den höjden ligger utanför ramen för rutan och vi har lagt overflow-y: scrolltill för att göra det extra innehållet tillgängligt med vertikal rullning. Det är vad vi menar med en rullningsruta.
Låt oss säga att vi lägger till en navigering längst upp i rutan med varje länk inriktad på de tre innehållssektionerna:
Se pennan Scrolling Box w / Nav av CSS-Tricks (@ css-tricks) på CodePen.
Varje länk tar användaren direkt till de olika delarna av innehållet i rullningsrutan. Som standard är övergången mellan ett plötsligt hopp.
Den här typen av hopp kan vara skurrande. Det är där som scroll-behaviorkommer in och låter oss ställa in en smidig rullningsövergång. Den här typen av saker brukade ta ett snyggt Javascript men scroll-behaviorger oss möjligheten att göra det naturligt i CSS, när webbläsarstödet förbättras.
Syntax
.module ( scroll-behavior: ( auto | smooth ); )Värden
Den scroll-behaviorfastighet accepterar två värden, som i huvudsak Växla mjuk rullning funktionen på och av.
auto(standard): Detta värde möjliggör ett snabbt hopp mellan element i rullningsrutan.smooth: I enlighet med sitt namn är detta värde den smidiga animerade övergången mellan element i rullningsrutan.
Demo
Följande demo fungerar bara på Chrome 61+, Firefox 36+ och Opera 48+ när detta skrivs.
Se Pen Scrolling Box w / `scroll-behavior` av CSS-Tricks (@ css-tricks) på CodePen.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 61 | 36 | Nej | 79 | Nej |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nej |
Mer information
- CSSOM View Module: Utkastsspecifikationen, inklusive CSS-egenskapen. Det nuvarande utkastet innehåller en rekommendation att flytta
scroll-behaviortill en annan specifikation, så det blir intressant att se var det landar. - Mozilla Developer Network: MDN-referensen för specifikationen
- Microsoft Edge-plattformsstatus: Visar för närvarande status för denna funktion som under övervägande
- Chrome-plattformsstatus: Visar för närvarande statusen för den här funktionen som under utveckling och inkluderar status för andra plattformar som bortom
- Smooth Scrolling Snippet: Snippets för att möjliggöra smidig rullning med Javascript och jQuery
- Smidig rullning och tillgänglighet: Ett CSS-Tricks-inlägg om effekten av Javascript-aktiverad smidig rullning