Twórz dobrze kontrolowane przewijanie, deklarując pozycje przyciągania przewijania.
Funkcja CSS Scroll Snap umożliwia deweloperom tworzenie dobrze kontrolowanych przewijanych treści przez deklarowanie pozycji przyciągania przewijania. Przykładami tego są artykuły podzielone na strony i karuzele obrazów. CSS Scroll Snap udostępnia łatwy w użyciu i spójny interfejs API do tworzenia tych popularnych wzorców UX.
Tło
Argumenty za przyciąganiem przewijania
Przewijanie to popularny i naturalny sposób interakcji z treściami w internecie. Jest to natywny sposób platformy na udostępnianie większej ilości informacji niż jest widoczna na ekranie jednocześnie, co jest szczególnie ważne na platformach mobilnych o ograniczonej przestrzeni ekranu. Nie dziwi więc, że autorzy stron internetowych coraz częściej wolą organizować treści w postaci płaskich list z możliwością przewijania zamiast w głębokich hierarchiach.
Główną wadą przewijania jest brak precyzji. Rzadko zdarza się, aby przewijanie kończyło się w miejscu, w którym kończy się akapit lub zdanie. Jest to jeszcze bardziej widoczne w przypadku treści podzielonych na strony lub elementów z wyraźnymi granicami, gdy przewijanie kończy się w połowie strony lub obrazu, pozostawiając je częściowo widoczne. W tych przypadkach użycia przydaje się dobrze kontrolowane przewijanie.
Aby rozwiązać ten problem, programiści stron internetowych od dawna korzystają z rozwiązań opartych na JavaScript, które umożliwiają kontrolowanie przewijania. Rozwiązania oparte na JavaScript nie zapewniają jednak pełnej wierności ze względu na brak podstawowych elementów dostosowywania przewijania lub dostępu do przewijania złożonego. CSS Scroll Snap zapewnia szybkie, dokładne i łatwe w użyciu rozwiązanie, które działa spójnie w różnych przeglądarkach.
CSS Scroll Snap umożliwia autorom stron internetowych oznaczanie każdego kontenera przewijania granicami, w których ma się kończyć przewijanie. Przeglądarki wybierają najbardziej odpowiednią pozycję końcową w zależności od szczegółów operacji przewijania, układu i widoczności kontenera przewijania oraz szczegółów pozycji przyciągania, a następnie płynnie animują do niej przejście. Wróćmy do wcześniejszego przykładu. Gdy użytkownik przestanie przewijać karuzelę, widoczny obraz wskoczy na swoje miejsce. JavaScript nie musi dostosowywać przewijania.
CSS Scroll Snap
Przyciąganie przewijania to dostosowywanie przesunięcia przewijania kontenera przewijania do preferowanej pozycji przyciągania po zakończeniu operacji przewijania.
Kontener przewijania może włączyć przyciąganie przewijania za pomocą 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 jego elementy podrzędne. scroll-snap-type
określa oś, wzdłuż której następuje przewijanie: x, y lub both, oraz
dokładność przyciągania: mandatory, proximity. Więcej informacji na ten temat znajdziesz w dalszej części szkolenia.
Pozycję 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 określeniem dla danej osi. W przypadku każdej osi możliwe są te rodzaje wyrównania: start, end, center.