Jakiś czas temu ukazały się wyniki ankiety State of CSS 2019. Lubię takie rzeczy, naprawdę. Dzięki nim poznaję światowe trendy, nowości branżowe, nie ukrywam również, że na ich podstawie oceniam swoją wiedzę i doświadczenie. Jedna z zakładek, które szczególnie mnie zainteresowały, dotyczyła interakcji. Konkretnie opisuje ona 3 egzotyczne właściwości CSS dotyczące scrolla. Uznałam, że muszę się nimi z Tobą podzielić.
Scroll Snap
W teorii najbardziej popularna własność. Hm, wstyd się przyznać, ale nie dla mnie. Ja akurat jej wcześniej nie znałam.
Wydaje mi się, że popularność tego modułu wynika z faktu, iż technika scroll snap nie jest nowa w świecie web developmentu. Doświadczeni programiści pewnie znają moduł Scroll Snap Points nazywany poprzednią wersją CSS Scroll Snap, który obecnie posiada status deprecated.
Ale czym w ogóle jest owe tajemnicze CSS Scroll Snap? To technika, dzięki której mówimy przeglądarce, w jakich miejscach powinna zatrzymać scrolla. Dzięki temu jesteśmy w stanie w prosty sposób zbudować np. komponent karuzeli, slidera, pseudo-paginacji.
Na poniższym obrazku A widzimy sytuację, kiedy użytkownik przewinął stronę do miejsca, w którym widoczna jest większość sekcji 2 oraz kawałek sekcji 3. Dzięki CSS Scroll Snap możemy wymusić na przeglądarce automatyczny, płynny scroll do początku sekcji 2 (obrazek B).
Podstawowe użycie CSS Scroll Snap polega na wykorzystaniu dwóch właściwości:
1. scroll-snap-type
właściwość kontenera określająca sposób przewijania do określonych pozycji
2. scroll-snap-align
właściwość przewijanych sekcji określająca względne miejsce, do którego użytkownik zostanie przeniesiony po zakończeniu przewijania
Mam dla Ciebie dobry przykład pokazujący, o co tutaj chodzi.
See the Pen Vertical Full-Screen by Max Kohler (@maxakohler) on CodePen.
Ten i inne przykłady znajdziesz na stronie CSS Tricks.
Należy pamiętać, że moduł CSS Scroll Snap nie ingeruje w samą operację przewijania. Jego działanie zaczyna się dopiero po zakończeniu akcji przewijania przez użytkownika, poprzez korekcję pozycji scrolla wg zdefiniowanych snap points.
Dzięki modułowi CSS Scroll Snap powinno umrzeć jakieś tysiąc niewinnych javascriptowych biblioteczek wykonujących dokładnie taką samą robotę. Nie korzystaj jednak z niego pochopnie. CSS Scroll Snap może potencjalnie generować tonę problemów z totalną niedostępnością niektórych treści strony na czele. Jeśli chcesz poznać szczegóły użycia tej funkcjonalności, koniecznie wejdź na MDN, CSS Tricks, developers.google.com, Basic concepts of CSS Scroll Snap, inovex.de.
CSS Scroll Snap definitywnie zasługuje na osobny artykuł, daj znać w komentarzu, czy jesteś zainteresowany tematem!
overscroll-behavior
O, nareszcie coś, co znam!
To skrótowa wersja overscroll-behavior-x oraz overscroll-behavior-y. Właściwość overscroll-behavior ustala zachowanie przeglądarki, kiedy podczas przewijania dochodzimy do końca przewijanego obszaru.
Rozumiesz coś z tego?
Wyobraź sobie stronę, a na niej chatbox z długą listą wiadomości. I będąc na początku konwersacji przewijasz ją w dół, aż dochodzisz do ostatniej wiadomości. Jednak Ty scrollujesz dalej. Co się dzieje? Domyślnie przeglądarka zaczyna scrollować całą stronę, na której znajduje się chatbox! Ten mechanizm nazywa się scroll chaining i możesz go zablokować właśnie za pomocą overscroll-behavior: contain. Pobaw się poniższym przykładem, aby zobaczyć praktyczne użycie tej właściwości.
See the Pen overscroll-behavior by sourire09 (@sourire09) on CodePen.
Z kolei overscroll-behavior: none przydaje się np. wtedy, kiedy chcemy uniknąć nieprzyjemnego efektu odświeżania strony po przewinięciu jej na samą górę. W szczególności widoczne jest to na urządzeniach mobilnych.
Szczegóły użycia overscroll-behavior wraz z genialnymi przykładami znajdziecie na tej stronie.
Uwaga, nie mylcie overscroll-behavior z scroll-behavior. To drugie odpowiada za sposób scrollowania, np. przy przechodzeniu do konkretnej sekcji. Domyślnie widzimy zwykły skok na stronie. Za pomocą scroll-behavior: smooth uzyskujemy efekt płynnego, animowanego scrolla.
overflow-anchor
Czasami, w szczególności na starych przeglądarkach, zdarza się, że strona nam „skacze”. Na przykład: przewinęliśmy stronę w dół, zanim załadował się obrazek na górze strony. W konsekwencji po jego załadowaniu strona automatycznie nam skacze do góry, a my musimy przewinąć ją na dół, aby powrócić do treści, która nas interesuje. Niefajnie, prawda?
Zmiany w strukturze DOM powyżej widocznego obszaru mogą powodować niechciane skoki na stronie, skutecznie dekoncentrujące użytkownika.
Funkcjonalność scroll anchoring została stworzona do zapobiegania takim sytuacjom. Odpowiada za śledzene pozycji scrolla oraz jego automatyczną korekcję w przypadku pojawienia się nowej treści na stronie. Właściwość overflow-anchor: auto jest domyślnie włączona na każdej przeglądarce, która ją wspiera.
Jej zalety świetnie pokazuje poniższy przykład z CSS Tricks.
See the Pen overflow-anchor by Chris Coyier (@chriscoyier) on CodePen.
Albo z Youtuba:
Jednak może zdarzyć się, że chcesz „wyłączyć” scroll anchoring. Zrobisz to za pomocą overflow-anchor: none dopisując go zarówno do całego dokumentu, jak i wybranego przez siebie przewijanego elementu – według Twoich potrzeb.
Pamiętaj jednak, że wyłączając scroll anchoring, nie możesz jej wybiórczo włączyć dla wybranego dziecka danej sekcji. Dla przykładu: nadając overflow-anchor: none dla body, nie możesz nadać overflow-anchor: auto dla diva wewnątrz body. To nie zadziała.
Więcej info: MDN, CSS Tricks, Guide do scroll anchoring, Scroll Anchoring in Firefox 66, github.com/WICG.
Znałeś te właściwości? Korzystałeś z nich? Jestem bardzo ciekawa, jakie są Twoje doświadczenia z tymi funkcjonalnościami!
