Przyciąganie przewijane po zmianie układu

Od wersji Chrome 81 nie trzeba już dodawać detektorów zdarzeń do wymuszania ponowne zaczepienie.

Adam Argyle
Kaan Alsan
Kaan Alsan
Yi Gu

Ściągnięcie przewijania CSS pozwala twórcom stron internetowych na tworzenie dobrze kontrolowanego przewijania przez deklarowanie miejsca przewijania. Wadą obecnego wdrożenia jest to, przyciąganie przewijania nie działa dobrze, gdy zmienia się układ, np. gdy widoczny obszar lub obraz zostanie obrócony. Ten błąd został usunięty w Chrome 81.

Interoperacyjność

Wiele przeglądarek obsługuje podstawową obsługę rozszerzenia CSS Scroll Snap. Zapoznaj się z sekcją Czy mogę korzystać z CSS? Przewiń Snap?, aby dowiedzieć się więcej.

Chrome jest obecnie jedyną przeglądarką, w której zaimplementowano przyciąganie przewijania po układzie zmian. Firefox ma bilet otwarty na Wdrożono to rozwiązanie, a Safari również ma otwartą biletu na ponowne przyciągnięcie zmiany zawartości elementu przewijania. Na razie możesz symulować to zachowanie, dodając ten kod dla detektorów zdarzeń, który wymusi wykonanie przyciągania: javascript scroller.scrollBy(0,0); Nie gwarantuje to jednak, że pasek przewijania zostanie przypięty w tym samym miejscu. .

Tło

Przyciąganie przewijania CSS

Funkcja CSS Scroll Snap pozwala twórcom stron internetowych przewijanie przez zadeklarowanie pozycji przyciągania przewijania. Te pozycje upewnij się, że treści, które można przewijać, są prawidłowo wyrównane z kontenerem eliminują problemy związane z nieprecyzyjnym przewijaniem. Inaczej mówiąc, przyciąganie przewijania:

  • Zapobiega dziwnym położeniu przewijania podczas przewijania.
  • Tworzy efekt stronicowania treści.

Artykuły podzielone na strony i karuzele obrazów to 2 typowe przypadki użycia przewijania zdjęcia.

Przykład przyciągania CSS do przewijania.
Przykład przyciągania przewijania CSS. Na koniec gdy przewijanie w poziomie obrazu jest wyrównane do środka w poziomie kontenera przewijania.

Wady

Pozycje przyciągania są gubione podczas zmiany rozmiaru okna.

Przyciąganie i przewijanie umożliwia użytkownikom łatwe poruszanie się po treści, niezdolność adaptacji do zmian w treści i układzie blokuje niektóre korzyści. Jak widać w przykładzie powyżej, użytkownicy muszą zmienić pozycję przewijania za każdym razem, gdy zmieniasz rozmiar okna na aby znaleźć wcześniej przyciągnięty element. Niektóre typowe przyczyny problemów z układem zmiany to:

  • Zmiana rozmiaru okna
  • Obracanie urządzenia
  • Otwieranie Narzędzi deweloperskich

Pierwsze 2 scenariusze sprawiają, że CSS Scroll Snap jest mniej atrakcyjny dla użytkowników, trzeci jest poważnym problemem dla programistów przy debugowaniu. Deweloperzy muszą też i uwzględniać ich wady, próbując utworzyć środowisko dynamiczne, obsługuje działania takie jak dodawanie, usuwanie czy przenoszenie treści.

Częstym rozwiązaniem tego problemu jest dodanie detektorów, które wykonują automatyczne przewijanie przez JavaScript wymuszający wykonanie przyciągania za każdym razem, gdy którykolwiek z tych układów zmian. To obejście może być nieskuteczne, gdy użytkownik oczekuje, lub przewijanie, co spowoduje powrót do tych samych treści co wcześniej. Dalsza obsługa JavaScript zdaje się niemal przesadzać z przeznaczeniem tej funkcji CSS.

Wbudowana obsługa ponownego przyciągania po zmianie układu w Chrome 81.

Wspomniane błędy nie występują już w Chrome 81, a użytkownicy, którzy przewijają treści, pozostaną nawet po zmianie układu. Ponownie ocenią pozycję przewijania po zmienić ich układ i w razie potrzeby ponownie przyciągnąć uwagę do najbliższego położenia. Jeśli element przewijania został wcześniej przyciągnięty do elementu, który nadal istnieje po układ, element przewijany spróbuje się do niego przywrócić. Zwróć uwagę na Co się dzieje, gdy układ zmienia się w następującym przykład.

Utracono pozycję przyciągania
. Obrócenie urządzenia nie zachowuje położenia przyciągania w Chrome 80. Po przewinięciu do slajdu z napisem NOPE i zmianie orientacji urządzenia z pionowej na poziomą, pojawi się pusty ekran, który oznacza, że utracono pozycję przyciągania przewijania.
Położenie przyciągania zostało zachowane
. Obrócenie urządzenia zachowuje położenie przyciągania w Chrome 81. Slajd, na którym mówi, że urządzenie NOPE pozostaje widoczne, mimo że orientacja urządzenia zmienia się wiele razy.

Patrz sekcja Ponowne przyciąganie po zmianie układu specyfikacji, aby dowiedzieć się więcej. .

Przykład: przyklejone paski przewijania

Dzięki funkcji „Przyciągnij po zmianie układu” deweloperzy mogą zaimplementować przyklejone paski przewijania z kilkoma wiersze kodu CSS:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

Chcesz dowiedzieć się więcej? Zobacz ten czat demonstracyjny: Interfejs do treści wizualnych.

Dodanie nowej wiadomości powoduje ponowne przyciągnięcie, dzięki czemu pozostaje ona na samym dole Chrome 81

Praca w przyszłości

Wszystkie efekty ponownego przyciągania przewijania są obecnie natychmiastowe. możliwe kontynuowanie do ponownego przyciągania uwagi i płynnego przewijania, . Zobacz problem ze specyfikacją. .

Prześlij opinię

Twoja opinia pomoże nam w ponownym przyciąganiu uwagi po zmianie układu, więc i go wypróbuj, i pozwól inżynierom Chromium co wiesz o sobie i myślą.