Właściwość CSS scroll-behavior (zachowanie scroll) pozwala nam określić, w jaki sposób ma nastąpić przewinięcie treści strony podczas skoku z jednego punktu do drugiego.
Jak działa scroll-behavior
Z podobnym efektem często mamy do czynienia na stronach typu One Page. Tyle, że tam analogiczny efekt animacji uzyskujemy z pomocą JS. Chodzi o efekt kiedy przesuwamy się szybko lub płynnie do konkretnego miejsca na stronie.
Jakie wartości przyjmuje scroll-behavior
- auto – jest to wartość domyślna i zapewnia normalne scrollowanie na stronie
- smooth – daje nam płynne scrollowanie
A jak to w praktyce wygląda? Najlepiej zobaczcie na poniższe przykłady:
Przykłady działania:
W pierwszym przypadku jak widzicie skaczemy od miejsca do miejsca. W drugim z kolei przesuwamy się płynnie. Kodu obu przykładów nie będę wam przepisywać możecie sprawdzić je na Codepen.
Jeżeli dopiero zaczynacie budowę stron zapraszam was również do zapoznania się z wpisem na temat etykiet i kotwic. To właśnie z ich pomocą wyznaczyłam miejsca gdzie menu ma się przesówać.
Interpretacja przez przeglądarki
| Właściowść | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| text-align-last | 61 | nie wspiera | 36 | nie wspiera | Tak |
źródła:
- http://webkod.pl/kurs-css/wlasciwosci/wszystkie/scroll-behavior
- https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
- https://css-tricks.com/almanac/properties/s/scroll-behavior/
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.