Właściwość CSSInterakcja i inne
scroll-behavior
Włącza płynne przewijanie przy przechodzeniu do kotwic i przewijaniu skryptem.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery przewijania
- JavaScript
element.style.scrollBehavior = "smooth"
Przykład
#CSS
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}HTML przykładu
<p style="margin: 0; color: #a3a3a3;">Cała strona przewija się płynnie do kotwic, ale nie dla osób, które wyłączyły animacje w systemie.</p>Podgląd
Definicja i zastosowanie
#Właściwość scroll-behavior: smooth sprawia, że skoki do miejsc na stronie, na przykład po kliknięciu linku #sekcja, odbywają się płynną animacją zamiast natychmiastowego przeskoku.
Dotyczy przewijania uruchomionego przez nawigację i przez JavaScript, na przykład element.scrollIntoView(). Nie zmienia przewijania kółkiem myszy ani palcem.
Ustawia się ją zwykle na elemencie html. Dla osób z ustawieniem ograniczonego ruchu płynne przewijanie warto wyłączyć w zapytaniu prefers-reduced-motion.
Składnia
#Składnia
scroll-behavior: auto | smooth;Wartości
#Wartości w praktyce
#auto
Natychmiastowy skok po kliknięciu linku.
.demo { scroll-behavior: auto; }smooth
Płynne przewinięcie do celu.
.demo { scroll-behavior: smooth; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przy przyklejonym nagłówku dodaj celom
scroll-margin-top, żeby nagłówek ich nie zasłaniał. - Wyłączaj płynne przewijanie dla
prefers-reduced-motion: reduce.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.