Jeśli chodzi o przewijanie, użytkownicy oczekują przede wszystkim płynności. W Chrome płynne przewijanie było dostępne w niektórych miejscach, np. gdy użytkownicy przewijali strony za pomocą trackpada lub przewijali stronę na urządzeniu mobilnym. Jeśli jednak użytkownik ma podłączoną mysz, zauważy, że przewijanie jest bardziej płynne, ale „kroczące”, co jest mniej estetyczne. W Chrome 49 wszystko się zmieni.
Wielu deweloperów rozwiązało problem stopniowego natywnych zachowań związanych z przewijaniem, które są zależne od danych wejściowych, za pomocą bibliotek, których celem jest przemapowanie na coś płynniejszego i przyjemniejszego dla oka. Użytkownicy mogą też to robić za pomocą rozszerzeń. Biblioteki i rozszerzenia, które zmieniają przewijanie, mają jednak pewne wady:
- Wrażenie dziwacznej doliny. Występuje to na 2 sposoby: po pierwsze, jedna witryna może się płynnie przewijać, a druga nie, przez co użytkownik może czuć się zdezorientowany z powodu tej niespójności. Po drugie, płynność animacji biblioteki niekoniecznie będzie taka sama jak na platformie. Chociaż ruch może być płynny, może wydawać się dziwny lub nienaturalny.
- Zwiększona skłonność do rywalizacji o główny wątek i zakłóceń. Podobnie jak w przypadku każdego kodu JavaScript dodanego do strony, zwiększy się obciążenie procesora. Nie zawsze jest to katastrofa, w zależności od tego, co jeszcze robi strona. Jeśli jednak wątek główny wykonuje jakąś długotrwałą pracę, a przewijanie jest z nim połączone, może to spowodować zacinanie się przewijania i niepłynność.
- Więcej czynności konserwacyjnych dla deweloperów, więcej kodu do pobrania przez użytkowników. Biblioteka do płynnego przewijania musi być aktualizowana i utrzymywana, a dodatkowo zwiększa ogólny rozmiar strony witryny.
Te wady często dotyczą też wielu bibliotek, które zajmują się zachowaniem przewijania, czy to efektów paralaksy, czy innych animacji połączonych z przewijaniem. Zbyt często powodują one zakłócenia, utrudniają dostępność i ogólnie pogarszają wrażenia użytkowników. Przewijanie jest podstawową interakcją w internecie, dlatego należy bardzo ostrożnie modyfikować ją za pomocą bibliotek.
W Chrome 49 domyślne zachowanie przewijania zmieni się w systemach Windows, Linux i ChromeOS. Stare, stopniowe przewijanie zniknie, a przewijanie będzie domyślnie płynne. Nie musisz wprowadzać żadnych zmian w kodzie, chyba że używasz bibliotek płynnego przewijania.
Więcej funkcji związanych z przewijaniem
Warto też wspomnieć o innych przydatnych funkcjach związanych z przewijaniem. Wielu z nas chce korzystać z efektów związanych z przewijaniem, takich jak paralaksa czy płynne przewijanie do fragmentu dokumentu (np. example.com/#somesection). Jak już wspominałem, stosowane obecnie podejścia często szkodzą zarówno deweloperom, jak i użytkownikom. Trwają prace nad 2 standardami platformy, które mogą pomóc: Worklety kompozytora i właściwość scroll-behavior CSS.
Houdini
Worklety kompozytora są częścią Houdini i jeszcze nie zostały w pełni zaimplementowane. Po wprowadzeniu poprawek będzie można pisać kod JavaScript, który będzie wykonywany w ramach procesu kompozytowania. Oznacza to, że efekty zależne od przewijania, takie jak paralaksa, będą idealnie zsynchronizowane z bieżącą pozycją przewijania. Biorąc pod uwagę sposób obsługi przewijania, w którym zdarzenia przewijania są wysyłane do głównego wątku tylko okresowo (i mogą być blokowane przez inne zadania w głównym wątku), byłby to ogromny krok naprzód. Jeśli interesują Cię worklety w Compositorze lub inne nowe funkcje Houdini, zapoznaj się z postem Surmy na temat Houdini, specyfikacjami Houdini i dodaj swoje opinie na liście mailingowej Houdini.
scroll-behavior
Jeśli chodzi o przewijanie na podstawie fragmentu, pomocna może być też inna właściwość CSS, mianowicie scroll-behavior. Jeśli chcesz go wypróbować, ucieszy Cię fakt, że jest on już dostępny w Firefoxie. Możesz go włączyć w Chrome Canary, używając flagi „Enable experimental Web Platform features” (Włącz eksperymentalne funkcje platformy internetowej). Jeśli ustawisz np. element <body> na scroll-behavior: smooth, wszystkie przewijania wywołane zmianami fragmentu lub przez window.scrollTo będą płynnie animowane. Jest to znacznie lepsze rozwiązanie niż używanie i utrzymywanie kodu z biblioteki, która próbuje wykonać to samo zadanie. W przypadku tak podstawowej funkcji jak przewijanie ważne jest, aby nie zawieść oczekiwań użytkowników. Dlatego, gdy te funkcje są w procesie tworzenia, warto zastosować podejście polegające na stopniowym ulepszaniu i usunąć wszystkie biblioteki, które próbują wypełnić te zachowania.
Przewijanie
Od wersji 49 przeglądarki Chrome przewijanie jest płynniejsze. To jednak nie wszystko: dzięki Houdini i właściwościom usługi porównywania cen, takim jak smooth-scroll, można wprowadzić jeszcze więcej potencjalnych ulepszeń. Wypróbuj Chrome 49, daj nam znać, co o nim myślisz, i co najważniejsze, pozwól przeglądarce przewijać strony, gdy tylko to możliwe.