Zachowanie się scrolla dynamiczne przewijanie

Właściwość CSS scroll-behavior (zachowanie się scrolla)

Czas czytania: < 1 minut

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:

See the Pen scroll-behavior CSS by Aura (@Julka85) on CodePen.

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śćChromeIE / EdgeFirefoxSafariOpera
text-align-last61nie wspiera36nie wspieraTak

ź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/