Począwszy od Chrome 81 nie trzeba już dodawać detektorów zdarzeń do wymuszania ponownego przyciągania.
Funkcja przyciągania przewijania w CSS umożliwia programistom stron internetowych zapewnienie dobrze kontrolowanej obsługi przewijania przez deklarowanie pozycji przyciągania podczas przewijania. Wadą obecnej implementacji jest to, że przyciąganie przewijane nie działa dobrze, gdy zmienia się układ, np. gdy zmieniasz rozmiar widocznego obszaru lub gdy obrócisz urządzenie. Ten błąd został usunięty w Chrome 81.
Interoperacyjność
Wiele przeglądarek ma podstawową obsługę funkcji CSS Scroll Snap. Więcej informacji znajdziesz w artykule Czy mogę użyć funkcji CSS Scroll Snap?.
Chrome jest obecnie jedyną przeglądarką, która obsługuje przyciąganie przewijania po zmianie układu. W przeglądarce Firefox jest dostępny zgłoszenie umożliwiające wykonanie tej czynności. W przeglądarce Safari także otwiera się zgłoszenie do ponownego przyciągnięcia po zmianie treści przewijającego. Na razie możesz zasymulować to zachowanie, dodając do detektorów zdarzeń ten kod, aby wymusić wykonanie przyciągania:javascript
scroller.scrollBy(0,0);Nie gwarantuje to jednak, że przewijak wraca do tego samego elementu.
Wprowadzenie
CSS – przewijanie
Funkcja CSS Scroll Snap umożliwia programistom stron internetowych zapewnienie kontroli podczas przewijania dzięki deklarowaniu pozycji przyciągania przewijania. Pozycje te zapewniają, że przewijane treści są prawidłowo dopasowane do kontenera, co pozwala uniknąć nieprecyzyjnego przewijania. Inaczej mówiąc, przyciąganie przewijania:
- Zapobiega wyświetlaniu nietypowych pozycji przewijania podczas przewijania.
- Efekt stronicowania treści.
Artykuły podzielone na strony i karuzele obrazów to 2 typowe przypadki użycia przewijania.
Filmy Short
Przyciąganie do przewijania umożliwia użytkownikom łatwe poruszanie się po treści, ale brak możliwości dostosowania się do zmian w treści i układzie sprawia, że niektóre jej potencjalne zalety nie są dla nich przydatne. Jak pokazano w przykładzie powyżej, użytkownicy muszą dostosować pozycję przewijania przy każdej zmianie rozmiaru okna, aby znaleźć przyciągnięty wcześniej element. Oto kilka typowych scenariuszy, które powodują zmianę układu:
- Zmiana rozmiaru okna
- Obracanie urządzenia
- Otwieranie Narzędzi deweloperskich
Pierwsze 2 scenariusze sprawiają, że aplikacja CSS Scroll Snap jest mniej atrakcyjna dla użytkowników, a trzeci stanowi koszmar dla programistów podczas debugowania. Deweloperzy muszą też wziąć pod uwagę te braki przy tworzeniu środowiska dynamicznego obsługującego takie działania jak dodawanie, usuwanie czy przenoszenie treści.
Częstym rozwiązaniem tego problemu jest dodanie detektorów, które wykonują automatyczne przewijanie za pomocą JavaScriptu, aby wymuszać wykonywanie przyciągania w przypadku każdej z tych zmian układu. To obejście może być nieskuteczne, gdy użytkownik oczekuje, że przewijany powrót do tej samej treści co wcześniej. Dalsza obsługa JavaScriptu wydaje się być sprzeczna z celem tej funkcji CSS.
Wbudowana obsługa ponownego przyciągania po zmianie układu w Chrome 81.
Wspomniane w niej błędy nie występują już w Chrome 81: przewijane elementy pozostaną ukryte nawet po zmianie układu. Po zmianie układu ponownie ocenią pozycje przewijania i w razie potrzeby powrócą do najbliższego punktu przyciągania. Jeśli przewijak został wcześniej przyciągnięty do elementu, który nadal istnieje po zmianie układu, będzie się on próbował cofnąć. Zwróć uwagę na to, co się stanie, gdy zmieni się układ w tym przykładzie.
NOPE i zmianie orientacji urządzenia z pionowej na poziomą pojawia się pusty ekran, który oznacza, że utracono pozycję przyciągania podczas przewijania.
NOPE pozostaje widoczny, mimo że orientacja urządzenia wielokrotnie się zmienia.
Więcej informacji znajdziesz w sekcji Ponowne przyciąganie po zmianie układu.
Przykład: przyklejone paski przewijania
Dzięki funkcji „Przyciągnij po zmianie układu” programiści mogą zaimplementować przyklejone paski przewijania z kilkoma wierszami kodu CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Chcesz dowiedzieć się więcej? Zapoznaj się z tym interfejsem demonstracyjnym czatu.
Praca w przyszłości
Wszystkie efekty ponownego przyciągania przewijania są obecnie dostępne natychmiast. Możliwe dodatkowe działanie polegające na ponownym przyciągnięciu za pomocą efektów płynnego przewijania. Aby dowiedzieć się więcej, zapoznaj się z problemem ze specyfikacją.
Prześlij opinię
Twoja opinia jest dla nas bezcenna, ponieważ pomoże nam ulepszyć ponowne przyciąganie użytkowników po wprowadzeniu zmian w układzie. Wypróbuj ją i pozwól inżynierom Chromium, co o niej myślisz.