Jeśli użytkownicy oczekują jednej rzeczy, której oczekujesz od przewijania, zależy jej płynności działania. Dawniej w niektórych miejscach w Chrome przewijało się płynnie – na przykład podczas przewijania na trackpadzie lub przesuwania strony na urządzeniu mobilnym. Jeśli jednak użytkownik ma podłączoną myszkę, przewijanie będzie bardziej „schodkowe”, co nie będzie estetyczne. W Chrome 49 wszystko się zmieni.
W przypadku schodkowej natywnej funkcji przewijania zależnej od danych wejściowych wielu programistów jest wykorzystanie bibliotek, aby zmienić ich wygląd na bardziej płynne i przyjemniejsze dla oka. To samo robią użytkownicy za pomocą rozszerzeń. Biblioteki i rozszerzenia mają jednak wady, które wymagają przewijania.
- Niesamowita atmosfera w dolinie. Prezentuje się to na 2 sposoby: po pierwsze w jednej witrynie przewijanie jest płynnie, a w drugiej – nie. Dlatego użytkownik może poczuć się zdezorientowany z powodu niespójności. Po drugie, zasady płynności działania biblioteki nie muszą być zgodne z zasadami platformy. Nawet jeśli ruch jest płynny, możesz wydawać się niewłaściwy lub niesamowity.
- Zwiększona skłonność do rywalizacji i zacinania się w głównych wątkach. Tak jak każdy inny kod JavaScript dodany do strony, nastąpi większe obciążenie procesora. Nie musi to być katastrofa, w zależności od innych działań strony, ale jeśli trwa długotrwała praca w wątku głównym, a przewijanie zostało połączone z wątkiem głównym, efektem tego może być zacinanie się przewijania i zacinanie się.
- Dbałość o środowisko dla deweloperów i więcej kodu do pobrania Biblioteka zapewniająca płynne przewijanie będzie wymagała aktualizowania i utrzymywania oraz zwiększenia ogólnej masy strony w witrynie.
Wady te często dotyczą też wielu bibliotek, które obsługują przewijanie, np. efektów paralaksy lub innych animacji łączonych z przewijaniem. Wszystkie te elementy zbyt często powodują zacinanie się, przeszkadzają w ułatwieniach dostępu i ogólnie utrudniają użytkownikom korzystanie z aplikacji. Przewijanie jest podstawową interakcją w internecie, więc musisz starannie ją modyfikować w bibliotekach.
W Chrome 49 domyślne działanie przewijania zmieni się w systemach Windows, Linux i ChromeOS. Stare przewijanie krokowe zostanie wycofane, a przewijanie będzie domyślnie płynne. Nie są wymagane żadne zmiany w kodzie. Wyjątek stanowią biblioteki umożliwiające płynne przewijanie.
Więcej przewijających się gadżetów
Warto też wspomnieć o innych gadżetach związanych z przewijaniem treści. Wielu z nas chce stosować efekty połączone z przewijaniem, takie jak paralaksa czy płynne przewijanie do fragmentu dokumentu (np. example.com/#somesection). Jak wspomniałem(-am), rozwiązania, które są dziś stosowane, mogą być szkodliwe zarówno dla deweloperów, jak i użytkowników. Obecnie pracujemy nad 2 standardami platformy: Worklets Compositor i właściwością CSS scroll-behavior.
Houdini
Worklety kompozytora są częścią Houdini i nie zostały jeszcze w pełni sprecyzowane i zaimplementowane. Pamiętaj jednak, że poprawki umożliwiają pisanie kodu JavaScript uruchamianego w ramach potoku kompozytora, co oznacza, że efekty sprzężone z przewijaniem, takie jak paralaksa, będą całkowicie zsynchronizowane z bieżącym położeniem przewijania. Biorąc pod uwagę obecny sposób przewijania, w którym zdarzenia przewijania są okresowo wysyłane do wątku głównego (i mogą być blokowane przez inne wątki głównego), jest to ogromny krok naprzód. Jeśli interesują Cię Worklety kompozytora lub inne ciekawe funkcje, które oferuje Houdini, przeczytaj posta Wprowadzenie do Houdini autorstwa Surmy oraz specyfikacje Houdini i podziel się swoją opinią na liście adresowej Houdini.
zachowanie podczas przewijania
W przypadku przewijania opartego na fragmentach przydatna może okazać się właściwość CSS scroll-behavior. Jeśli chcesz ją wypróbować, ucieszy Cię wiadomość, że jest ona już dostępna w przeglądarce Firefox. Możesz ją włączyć w Chrome Canary, korzystając z flagi „Włącz eksperymentalne funkcje platformy internetowej”. Jeśli ustawisz np. element <body> na wartość scroll-behavior: smooth, wszystkie przewinięcia wywołane przez zmianę fragmentu lub przez metodę window.scrollTo będą płynnie animowane. To znacznie lepsze niż używanie i utrzymywanie kodu z biblioteki, która próbuje robić to samo. Mając tak istotny element jak przewijanie, bardzo ważne jest, aby nie zaspokajać oczekiwań użytkowników. Chociaż te funkcje wciąż się zmieniają, warto stosować podejście progresywnego ulepszania i usuwać biblioteki, które próbują wykorzystać te funkcje.
Przewijaj dalej
Od wersji Chrome 49 przewijanie stanie się płynniejsze. To jednak nie wszystko. Możesz znaleźć więcej potencjalnych ulepszeń, które możesz uzyskać dzięki usługom Houdini i CSS, takim jak smooth-scroll. Wypróbuj Chrome 49 i daj nam znać, co o nim myślisz, a przede wszystkim pozwól przeglądarce przewijać ją tak, jak możesz.