CSS Academy · Lekcja

scroll-snap-type i scroll-snap-align

Nauczy się Pan/Pani tworzyć przewijanie typu karuzela i paginację za pomocą właściwości CSS scroll snap.

scroll-snap-type i scroll-snap-align to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym jest CSS Scroll Snap?

CSS Scroll Snap umożliwia przewijalnym kontenerom „przyciąganie” do określonych pozycji po przewinięciu, tworząc kontrolowane zachowanie stronicowania i karuzel bez użycia JavaScriptu.

scroll-snap-type na kontenerze

Włącz przyciąganie na przewijalnym kontenerze:

  <div class="carousel">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>

Wartości scroll-snap-type

Dwie części:

Oś: x, y lub both
Ścisłość: mandatory (zawsze przyciąga) lub proximity (przyciąga, gdy element znajduje się blisko punktu przyciągania)

  <div class="paged">Paged container</div>
  <div class="freeform">Freeform container</div>

scroll-snap-align na elementach

Określ, gdzie każdy element potomny ma zostać przyciągnięty wewnątrz kontenera:

  <div class="carousel-demo">
    <div class="carousel-item">1</div><div class="carousel-item">2</div>
  </div>

Przyciąganie pełnoekranowych stron

Układ pełnoekranowych sekcji przewijanych pionowo strona po stronie:

  <div class="sections">
    <div class="section">Section 1</div><div class="section">Section 2</div>
  </div>

Przyciąganie karuzeli poziomej

Pozioma karuzela kart z przyciąganiem:

  <div class="carousel">
    <div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
  </div>

scroll-snap-stop

scroll-snap-stop: always zapobiega pomijaniu punktów przyciągania podczas szybkiego przewijania. Użytkownik nie może pominąć więcej niż jednego elementu podczas jednego gestu przewijania.

  <div class="slider">
    <div class="slide">1</div><div class="slide">2</div>
  </div>

scroll-snap-margin i scroll-padding

Przesuń pozycję przyciągania na elementach (scroll-margin) lub na kontenerze (scroll-padding):

  <div class="carousel">Carousel container</div>

overscroll-behavior

overscroll-behavior: contain zapobiega przekazywaniu przewijania — gdy kontener osiągnie granicę przewijania, strona również nie zacznie się przewijać:

  <div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

Uwagi dotyczące dostępności

Karuzele z przyciąganiem nadal powinny być obsługiwane za pomocą klawiatury. Klawisze strzałek powinny przenosić między punktami przyciągania. Dodaj role i etykiety ARIA dla karuzeli. Programowe przewijanie za pomocą JavaScriptu powinno respektować te same punkty przyciągania.

Karuzele CSS a JavaScript

CSS Scroll Snap obsługuje większość podstawowych potrzeb karuzeli bez JavaScriptu: przyciąganie do elementów, ukrywanie paska przewijania i wyrównywanie dopełnienia. Użyj biblioteki JavaScript, gdy potrzebujesz wskaźników punktowych, przycisków poprzedni/następny z animowanymi przejściami lub złożonego zarządzania dostępnością.

Szybkie sprawdzenie

Jaka wartość scroll-snap-type gwarantuje, że kontener zawsze zatrzyma się dokładnie w punkcie przyciągania, nigdy pomiędzy nimi?

Podsumowanie

CSS Scroll Snap tworzy zachowania stronicowania i karuzel. Ustaw scroll-snap-type: x mandatory na kontenerze oraz scroll-snap-align: start na elementach. Użyj scroll-snap-stop: always, aby zapobiec pomijaniu elementów. Połącz to z overscroll-behavior: contain, aby zapobiec przekazywaniu przewijania. Ukryj paski przewijania za pomocą scrollbar-width: none, aby uzyskać estetyczny wygląd.

Często zadawane pytania

Czy lekcja „scroll-snap-type i scroll-snap-align” jest bezpłatna?

Tak — pełny tekst „scroll-snap-type i scroll-snap-align” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „scroll-snap-type i scroll-snap-align”?

Nauczy się Pan/Pani tworzyć przewijanie typu karuzela i paginację za pomocą właściwości CSS scroll snap. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „scroll-snap-type i scroll-snap-align”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

overflow: hidden, scroll, auto, clip
scroll-behavior: smooth
scroll-snap-type i scroll-snap-align
Stylizowanie pasków przewijania za pomocą ::-webkit-scrollbar

← Powrót do CSS Academy