Twórz dobrze kontrolowane przewijanie z przyciąganiem, deklarując pozycje przyciągania przewijania.
Funkcja przewijania z przyciąganiem w CSS umożliwia deweloperom stron internetowych tworzenie dobrze kontrolowanych funkcji przewijania przez deklarowanie pozycji przyciągania. Dwa często używane przykłady to artykuły podzielone na strony i karuzela obrazów. CSS Scroll Snap zapewnia łatwy w użyciu i spójny interfejs API do tworzenia tych popularnych wzorców UX.
Tło
Co przemawia za przewijaniem z przyciąganiem
Przewijanie to popularny i naturalny sposób interakcji z treściami w internecie. Jest to natywny sposób platformy na zapewnienie dostępu do większej ilości informacji niż jest widoczna na ekranie, co jest szczególnie ważne na platformach mobilnych z ograniczoną przestrzenią ekranu. Nie dziwi więc, że autorzy stron internetowych coraz częściej wolą organizować treści w płaskie listy, które można przewijać, a nie w głębokie hierarchie.
Główną wadą przewijania jest brak precyzji. Rzadko się zdarza, aby przewijanie kończyło się na akapicie lub zdaniu. Jest to jeszcze bardziej widoczne w przypadku treści podzielonych na strony lub elementy z wyraźnymi granicami, gdy przewijanie kończy się na środku strony lub obrazu, pozostawiając go częściowo widocznym. 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 języku JavaScript, które umożliwiają kontrolowanie przewijania. Jednak rozwiązania oparte na JavaScripcie nie zapewniają pełnej wierności ze względu na brak elementów podstawowych dostosowywania przewijania lub dostępu do przewijania złożonego. Przewijanie z przyciąganiem w CSS to szybkie, wysokiej jakości i łatwe w użyciu rozwiązanie, które działa spójnie w różnych przeglądarkach.
Przewijanie z przyciąganiem w CSS umożliwia twórcom stron internetowych oznaczanie każdego kontenera przewijania granicami, na których mają się kończyć operacje przewijania. 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. Wróćmy do poprzedniego przykładu. Gdy użytkownik kończy przewijanie karuzeli, widoczny obraz wskakuje na swoje miejsce. Nie trzeba dostosowywać przewijania za pomocą JavaScriptu.
Przewijanie z przyciąganiem w CSS
Przewijanie z przyciąganiem to dostosowywanie przesunięcia przewijania kontenera do preferowanej pozycji przyciągania po zakończeniu operacji przewijania.
Przewijanie z przyciąganiem można włączyć w kontenerze przewijania za pomocą właściwości scroll-snap-type. Informuje to przeglądarkę, że powinna rozważyć przyciągnięcie tego kontenera przewijania do pozycji przyciągania wygenerowanych przez jego elementy podrzędne. scroll-snap-type określa oś, na której odbywa się przewijanie: x, y lub both, oraz rygorystyczność 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 nadrzędny kontener przewijania i element są wyrównane zgodnie z ustawieniami dla danej osi. Na każdej osi możliwe są te wyrównania: start, end, center.
Wyrównanie start oznacza, że krawędź początkowa obszaru 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ź końcowa lub środek punktu przyciągania kontenera przewijania powinny być wyrównane z krawędzią końcową lub środkiem obszaru przyciągania elementu.
Poniższe przykłady pokazują, jak korzystać z tych pojęć.
Przykład: galeria pozioma
Typowym przypadkiem użycia przewijania z przyciąganiem jest karuzela obrazów. Na przykład, aby utworzyć karuzelę obrazów w orientacji poziomej, która przyciąga do każdego obrazu podczas przewijania, możemy określić, że kontener przewijania ma obowiązkowy scroll-snap-type na osi poziomej.
Ustaw każdy obraz na scroll-snap-align: center, aby przyciąganie wyśrodkowywało obraz w karuzeli.
#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 przyciągać dany element i rozmiar kontenera 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 zobaczenia całego obrazu. Jednak specyfikacja wymaga, aby implementacje wykrywały ten przypadek i umożliwiały użytkownikowi swobodne przewijanie obrazu, przyciągając tylko jego krawędzie.
Przykład: strona produktu z procesem zakupu
Innym częstym przypadkiem, w którym przewijanie z przyciąganiem może być przydatne, są strony z wieloma sekcjami logicznymi, które można przewijać w pionie, np. typowa strona produktu. W takich przypadkach bardziej naturalnym wyborem jest scroll-snap-type: y proximity;. Nie przeszkadza, gdy użytkownik przewija do środka danej sekcji, ale też przyciąga uwagę do nowej sekcji, gdy użytkownik przewija wystarczająco blisko.
Można to zrobić w ten sposób:
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 pozostała widoczna, gdy kontener przewijania jest przyciągnięty, aby użytkownicy mogli zobaczyć, co znajduje się powyżej.
Właściwość scroll-padding to nowa właściwość CSS, której można używać do dostosowywania efektywnego widocznego obszaru kontenera przewijania lub obszaru przyciągania, który jest używany podczas obliczania wyrównania przewijania z przyciąganiem. Właściwość definiuje wcięcie względem pola dopełnienia kontenera przewijania. W naszym przykładzie u góry dodano dodatkową wstawkę 15vh, która instruuje przeglądarkę, aby jako pionową krawędź początkową przewijania z przyciąganiem uwzględniła niższą pozycję 15vh poniżej górnej krawędzi kontenera przewijania. Podczas przyciągania początkowa krawędź elementu docelowego przyciągania zostanie wyrównana z tą nową pozycją, pozostawiając miejsce powyżej.
Właściwość scroll-margin określa wartość przesunięcia używaną do dostosowania efektywnego pola celu przyciągania, podobnie jak funkcja scroll-padding w kontenerze przewijania z przyciąganiem.
Możesz zauważyć, że te 2 właściwości nie zawierają słowa „snap”. Jest to zamierzone, ponieważ te właściwości modyfikują pole we wszystkich odpowiednich operacjach przewijania, a nie tylko w przypadku przewijania z przyciąganiem. Na przykład Chrome uwzględnia je podczas obliczania rozmiaru strony na potrzeby operacji przewijania, takich jak PageDown i PageUp, a także podczas obliczania wielkości przewijania w przypadku operacji Element.scrollIntoView().
Interakcja z innymi interfejsami API przewijania
DOM Scrolling API
Przewijanie z przyciąganiem następuje po wszystkich operacjach przewijania, w tym tych zainicjowanych przez skrypt. Gdy używasz interfejsów API takich jak Element.scrollTo, przeglądarka oblicza zamierzoną pozycję przewijania, a następnie stosuje odpowiednią logikę przyciągania, aby znaleźć ostateczną lokalizację przyciągania. Dzięki temu skrypt użytkownika nie musi wykonywać żadnych ręcznych obliczeń na potrzeby przyciągania.
Płynne przewijanie
Płynne przewijanie kontroluje zachowanie operacji przewijania zautomatyzowanego, a przewijanie z przyciąganiem określa jej miejsce docelowe. Ponieważ kontrolują ortogonalne aspekty przewijania, można ich używać razem i uzupełniają się nawzajem.
Działanie overscroll
Interfejs API zachowania przewijania określa, jak przewijanie jest łączone w łańcuch między wieloma elementami, i nie ma na nie wpływu przewijanie z przyciąganiem.
Zastrzeżenia i sprawdzone metody
Unikaj używania obowiązkowego przyciągania, gdy elementy docelowe są od siebie bardzo oddalone. Może to spowodować, że treści między pozycjami przyciągania staną się niedostępne.
W wielu przypadkach przewijanie z przyciąganiem można dodać jako ulepszenie bez konieczności wykrywania funkcji.
W razie potrzeby użyj @supports lub CSS.supports, aby wykryć obsługę przewijania z przyciąganiem w CSS.
Unikaj używania scroll-snap-type, który jest również obecny w wycofanej specyfikacji.
Wykrywanie funkcji w CSS
@supports (scroll-snap-align: start) {
article {
scroll-snap-type: y proximity;
scroll-padding-top: 15vh;
overflow-y: scroll;
}
}
Wykrywanie funkcji w języku JavaScript
if (CSS.supports('scroll-snap-align: start')) {
// use css scroll snap
} else {
// use fallback
}
Nie zakładaj, że interfejsy API do automatycznego przewijania, takie jak Element.scrollTo, zawsze kończą działanie przy żądanym przesunięciu przewijania. Przewijanie z przyciąganiem może dostosować przesunięcie przewijania po zakończeniu przewijania automatycznego. Pamiętaj, że nie było to dobre założenie nawet przed wprowadzeniem przewijania z przyciąganiem, ponieważ przewijanie mogło zostać przerwane z innych powodów, ale jest to szczególnie ważne w przypadku przewijania z przyciąganiem.
Kolejne działania
Przewijanie było tematem niedawnej ankiety przeprowadzonej przez zespół Chrome.
Wyniki ankiety wskazują kilka obszarów, które wymagają dodatkowej pracy, aby zmniejszyć różnicę między bibliotekami wtyczek a CSS.
W najbliższym czasie skupimy się na scroll-snap, w tym:
- dostępność i zgodność interfejsu API w różnych przeglądarkach;
- Pracuj nad nowymi interfejsami CSS API, takimi jak
scroll-start. - Pracuj nad nowymi zdarzeniami JS, takimi jak
snapChanged().