css

Czy wiesz, czym jest i jak działa Scroll Snap?

14 czerwca 2024

Atrybut CSS scroll-snap-type powoduje, że scroll nie zatrzymuje się w miejscu, gdzie przestaliśmy scrollować, a przylega do elementu, który mu wskażemy. Aby skorzystać z tego zachowania najpierw na kontenerze, który scrollujemy, ustawiamy atrybut scroll-snap-type:

.container {
    scroll-snap-type: x;
}

x oznacza, że będziemy zatrzymywać się na osi x. Parametr może też przybierać wartości: y, block, inline, both. Więcej szczegółów w dokumentacji).

Następnie w dzieciach tego kontenera ustawiamy atrybut scroll-snap-align, który określa czy scroll ma się zatrzymać na początku, czy na końcu elementu:

.element {
    scroll-snap-align: start;
}

Przydatne linki

Najnowsze wpisy