Dobrze kontrolowane przewijanie za pomocą funkcji CSS Scroll Snap

Zapewnij prawidłową kontrolę nad przewijaniem, deklarując pozycje przyciągania przewijania.

Robert Flack

Majid Valipour

Funkcja CSS Scroll Snap pozwala deweloperom tworzyć dobrze kontrolowane przewijanie, deklarując pozycje zatrzymywania przewijania. Są to najczęściej używane artykuły podzielone na strony i karuzele obrazów. CSS Scroll Snap to łatwy w użyciu i spójny interfejs API do tworzenia tych popularnych wzorców UX.

Uwaga: przyciąganie do krawędzi w CSS jest obsługiwane we wszystkich głównych przeglądarkach. Poprzednia wersja specyfikacji została wdrożona w niektórych przeglądarkach i może być widoczna w samouczkach i artykułach. Jeśli materiał zawiera wycofane właściwości scroll-snap-points-x i scroll-snap-points-y, należy uznać go za nieaktualny.

Tło

Etui na przyciąganie przewijania

Przewijanie jest popularnym i naturalnym sposobem na interakcję z treściami w internecie. Jest to natywny sposób na zapewnianie dostępu do większej ilości informacji, niż jest to widoczne na ekranie jednocześnie, co ma szczególne znaczenie w przypadku platform mobilnych, które mają ograniczoną ilość miejsca na ekranie. Nic więc dziwnego, że autorzy stron internetowych coraz częściej preferują organizację treści w formie przewijanych list, a nie rozbudowanych hierarchii.

Główną wadą przewijania jest brak precyzji. Rzadko zdarza się, aby koniec przewijania był wyrównany do akapitu lub zdania. Jest to jeszcze bardziej widoczne w przypadku treści podzielonych na strony lub treści uporządkowanej w elementy z jasnymi granicami, gdy przewijanie kończy się w połowie strony lub obrazu, pozostawiając go częściowo widocznym. Te przypadki użycia zapewniają dużą kontrolę nad przewijaniem.

Programiści stron internetowych od dawna korzystają z rozwiązań opartych na JavaScriptie, aby kontrolować przewijanie. Jednak rozwiązania oparte na języku JavaScript nie są w stanie zapewnić pełnej wierności z powodu braku podstawowych elementów do dostosowania przewijania lub dostępu do przewijania złożonego. CSS Scroll Snap zapewnia szybkie, niezawodne i łatwe w użyciu rozwiązanie, które działa spójnie w różnych przeglądarkach.

Przyciąganie przewijania CSS umożliwia autorom stron internetowych oznaczanie każdego kontenera przewijania granicami działań przewijania, które mają zakończyć się na końcu. Następnie przeglądarki wybierają najbardziej odpowiednią pozycję końcową w zależności od specyfiki operacji przewijania, układu i widoczności kontenera oraz szczegółów położenia przyciągania, a następnie płynnie animują się do niego. Wróćmy do naszego wcześniejszego przykładu. Gdy użytkownik przestanie przewijać karuzel, widoczny obraz zostanie w nim zablokowany. Nie trzeba wprowadzać żadnych korekt przewijania za pomocą JavaScript.

Przykład zastosowania przyciągania przewijania CSS z karuzelą obrazów. Tutaj blokowanie przewijania zapewnia, że na końcu przewijania obraz jest wyrównany poziomo z poziomym środkiem kontenera.

CSS Scroll Snap

Przyciąganie po przewinięciu to działanie polegające na dostosowaniu przesunięcia kontenera przewijania do preferowanej pozycji przyciągania po zakończeniu przewijania.

Aby włączyć łączenie przewijania, użyj właściwości scroll-snap-type. Informuje to przeglądarkę, że powinna rozważyć przyciąganie tego kontenera przewijania do pozycji przyciągania wygenerowanych przez elementy podrzędne. scroll-snap-type określa oś, na której ma miejsce przewijanie: x, y lub both, oraz określa dokładność przyciągania: mandatory, proximity. Więcej informacji na ten temat znajdziesz w następnych częściach.

Położenie przyciągania można uzyskać, deklarując żądane wyrównanie elementu. Ta pozycja to przesunięcie przewijania, przy którym najbliższy kontener przewijania elementu nadrzędnego i element są wyrównane zgodnie z wymaganiami danej osi. Na każdej osi można wyrównać te elementy: start, end, center.

Wyrównanie start oznacza, że początkowa krawędź przyciągania kontenera przewijania powinna być wyrównana z krawędzią początkową obszaru przyciągania elementu. Podobnie wyrównania end i center oznaczają, że krawędź lub środek krawędzi uchwytu kontenera do przewijania powinien być wyrównany z krawędzią lub środkiem obszaru przyciągania elementu.

Kluczowy termin: snapport to obszar kontenera przewijania, do którego są dopasowywane obszary snapowania. Domyślnie jest on taki sam jak wizualny widoczny obszar kontenera przewijania, ale można go dostosować za pomocą właściwości scroll-padding.

Przykład różnych wyrównań na osi przewijania w poziomie.

Poniższe przykłady pokazują, jak korzystać z tych koncepcji.

Przykład: galeria pozioma

Typowym zastosowaniem przyciągania przewijanego jest karuzela obrazów. Na przykład, aby utworzyć poziomą karuzelkę obrazów, która będzie się automatycznie dostosowywać do każdego obrazu podczas przewijania, możesz określić, że kontener przewijania ma mieć obowiązkową wartość scroll-snap-type na osi poziomej. Aby upewnić się, że obraz będzie wyśrodkowany w karuzeli, ustaw dla każdego obrazu wartość scroll-snap-align: center.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

Ponieważ pozycje przyciągania są powiązane z elementem, algorytm przyciągania może inteligentnie określać, kiedy i jak ma przyciągać dany element oraz kontener do przewijania. Rozważmy na przykład przypadek, w którym jeden obraz jest większy niż karuzela. Naiwny algorytm przyciągania może uniemożliwić użytkownikowi przesuwanie widoku w celu obejrzenia pełnego obrazu. Jednak specyfikacja wymaga, aby implementacje wykrywały ten przypadek i umożliwiały użytkownikowi swobodne przewijanie obrazu tylko przy jego krawędziach.

Wyświetl demonstrację | Źródło

Przykład: strona produktu z przebiegiem

Innym częstym przypadkiem, który może być korzystny dla przyciągania przewijanych, są strony z wieloma sekcjami logicznymi, które można przewijać w pionie, np. typowa strona produktu. W takich przypadkach scroll-snap-type: y proximity; sprawdza się lepiej. Nie przeszkadza, gdy użytkownik przewija stronę do środka danej sekcji, ale zwraca uwagę na nową sekcję, gdy użytkownik przewinie do niej.

Oto jak to zrobić:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

Dopełnienie i margines przewijania

Strona produktu ma stały nagłówek u góry. Projekt wymagał również, aby część górnej sekcji była widoczna po przyciągnięciu kontenera przewijania, aby była to wskazówka dla użytkowników dotycząca powyższej zawartości.

Właściwość scroll-padding to nowa właściwość CSS, która może służyć do dostosowywania skutecznego obszaru widocznego kontenera przewijania (czyli portu zapinania) używanego podczas obliczania wyrównań zapinania przewijania. Właściwość ta określa wcięcie względem pola wypełnienia kontenera przewijania. W naszym przykładzie u góry została dodana 15vh dodatkowa wkładka, dzięki której przeglądarka powinna rozważyć niższą pozycję, 15vh poniżej górnej krawędzi kontenera przewijania jako jego pionową krawędź początkową do przewijania. Podczas łączenia krawędź początkowa elementu docelowego zostanie wyrównana z nową pozycją, pozostawiając nad nim wolną przestrzeń.

Właściwość scroll-margin określa wartość wyjścia służącą do dostosowywania efektywnego pola docelowego przyciągania, podobnie jak w przypadku kontenera scroll-padding, który działa w kontenerze przewijania.

Jak widzisz, te 2 właściwości nie zawierają słowa „snap”. Jest to celowe, ponieważ modyfikuje pole pod kątem wszystkich odpowiednich operacji przewijania, a nie tylko przyciąga elementy do przewijania. Na przykład Chrome uwzględnia je przy obliczaniu rozmiaru strony w przypadku operacji przewijania stronicowania (takich jak PageDown i PageUp) oraz przy obliczaniu szybkości przewijania dla operacji Element.scrollIntoView().

Wyświetl demo | Źródło

Interakcja z innymi interfejsami API przewijania

DOM Scrolling API

Przyciąganie po przewinięciu ma miejsce po wszystkich operacjach przewijania, w tym tych zainicjowanych przez skrypt. Gdy używasz interfejsów API takich jak Element.scrollTo, przeglądarka obliczy zamierzone położenie przewijania operacji, a następnie zastosuje odpowiednie mechanizmy przyciągania, aby znaleźć ostateczną lokalizację przyciągania. Dlatego nie ma potrzeby, aby skrypt użytkownika wykonywał ręczne obliczenia dotyczące przyciągania.

płynne przewijanie,

Płynne przewijanie kontroluje działanie automatycznej operacji przewijania, a dopasowanie do przewijania określa jej miejsce docelowe. Ponieważ kontrolują one ortogonalne aspekty przewijania, mogą być używane razem i uzupełniać się wzajemnie.

Zachowanie podczas przewijania

Interfejs API zachowania przewijania steruje tym, jak przewijanie jest łańcuchowane w wielu elementach, i nie jest zależne od zatrzymywania przewijania.

Zastrzeżenia i sprawdzone metody

Unikaj stosowania obowiązkowego łapania, gdy elementy docelowe są od siebie bardzo oddalone. Może to spowodować, że treści między pozycjami przyciągania będą niedostępne.

W wielu przypadkach udoskonalenie można dodać bez konieczności wykrywania cech. W razie potrzeby użyj @supports lub CSS.supports, aby wykryć obsługę funkcji CSS Scroll Snap. Unikaj używania atrybutu scroll-snap-type, który również występuje w wycofanej specyfikacji.

Wykrywanie cech w CSS

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

Wykrywanie funkcji w JavaScript

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

Nie zakładaj, że interfejsy API przewijania programowego, takie jak Element.scrollTo, zawsze kończą się na żądanym przesunięciem przewijania. Po zakończeniu przewijania programowego przesunięcie przewijania może zostać skorygowane. Pamiętaj, że nie było to dobre założenie jeszcze przed przyciągnięciem przewijania, ponieważ przewijanie mogło zostać przerwane z innych powodów, ale w szczególności dotyczy to przyciągania.

Uwaga: wkrótce zostanie opublikowana propozycja zmiany różnych interfejsów API przewijania, aby zwracały obietnicę. Ta obietnica zostaje zrealizowana, gdy klient użytkownika ukończy lub przerwie operację przewijania. Po ustandaryzowaniu i wdrożeniu zapewnia ergonomiczną i skuteczną metodę śledzenia działań użytkownika po przewinięciu zainicjowanym przez skrypt.

Praca w przyszłości

Funkcja przewijania była głównym tematem niedawnej ankiety zespołu Chrome. Wyniki ankiety wskazały kilka obszarów, które wymagają dodatkowych działań, aby zmniejszyć lukę między bibliotekami wtyczek a CSS. Nadchodzące zadania będą dotyczyć scroll-snap, w tym:

1. Dostępność i zgodność interfejsów API w przeglądarkach.
2. Pracuj nad nowymi interfejsami CSS API, takimi jak scroll-start.
3. Pracuj nad nowymi zdarzeniami JS, takimi jak snapChanged().