Od wersji 81 Chrome nie musisz już dodawać odbiorników zdarzeń, aby wymusić ponowne przechwytywanie.
CSS Scroll Snap pozwala deweloperom tworzyć dobrze kontrolowane efekty przewijania, deklarując pozycje zaczepienia przewijania. Wadą obecnej implementacji jest to, że przyciąganie przez przewijanie nie działa dobrze, gdy zmienia się układ, np. po zmianie rozmiaru widocznego obszaru lub obróceniu urządzenia. Ten problem został rozwiązany w Chrome 81.
Interoperacyjność
Wiele przeglądarek obsługuje w podstawowym zakresie funkcję CSS Scroll Snap. Więcej informacji znajdziesz w artykule Czy mogę używać funkcji CSS Scroll Snap?.
Chrome jest obecnie jedyną przeglądarką, która implementuje przewijanie z zatrzymaniem po zmianach układu. W przypadku Firefoksa jest otwarty problem dotyczący implementacji tej funkcji, a w Safari jest też otwarty problem dotyczący ponownego przyciągania po zmianie zawartości scrollera. Obecnie możesz symulować to zachowanie, dodając do odbiorników zdarzeń następujący kod, aby wymusić wykonanie przyciągania:
javascript
scroller.scrollBy(0,0);
Nie gwarantuje to jednak, że suwak wróci do tego samego elementu.
Tło
CSS Scroll Snap
Funkcja CSS Scroll Snap pozwala twórcom stron internetowych dobrze kontrolować przewijanie przez zadeklarowanie pozycji przyciągania przewijania. Te pozycje zapewniają, że treści, które można przewijać, są prawidłowo wyrównane z kontenerem, co pozwala rozwiązać problemy z nieprecyzyjnym przewijaniem. Innymi słowy, przewijanie z przyciąganiem:
- Zapobiega dziwnym położeniu przewijania podczas przewijania.
- Tworzy efekt stronicowania treści.
Strony z artykułami podzielonymi na strony i karuzele obrazów to 2 typowe zastosowania animacji przewijania.
Wady
Przeskakiwanie podczas przewijania umożliwia użytkownikom bezproblemowe poruszanie się po treściach, ale brak możliwości dostosowania się do zmian w treści i układzie ogranicza niektóre z potencjalnych korzyści. Jak widać na przykładzie powyżej, użytkownicy muszą ponownie dostosować pozycje przewijania po zmianie rozmiaru okna, aby znaleźć wcześniej przypięty element. Oto kilka typowych scenariuszy, które powodują zmianę układu:
- Zmienianie rozmiaru okna
- obracanie urządzenia,
- Otwieranie Narzędzi deweloperskich
Pierwsze 2 scenariusze sprawiają, że funkcja CSS Scroll Snap jest mniej atrakcyjna dla użytkowników, a trzeci jest koszmarem dla programistów podczas debugowania. Deweloperzy muszą też wziąć pod uwagę te niedociągnięcia, aby stworzyć dynamiczne działanie, które umożliwia wykonywanie takich czynności jak dodawanie, usuwanie i przenoszenie treści.
Typowym rozwiązaniem tego problemu jest dodanie detektorów, które wykonują zautomatyzowany przewijanie za pomocą JavaScriptu, aby wymuszać wykonanie przyciągania za każdym razem, gdy dojdzie do którejkolwiek z tych zmian układu. To obejście może być nieskuteczne, gdy użytkownik oczekuje, że suwak wróci do tych samych treści. Wydaje się, że dalsza obsługa JavaScriptu zdaje się niemal przesadzać z przeznaczeniem tej funkcji CSS.
Wbudowana obsługa ponownego przypinania po zmianach układu w Chrome 81
W Chrome 81 wymienione powyżej niedociągnięcia zostały usunięte: suwaki pozostaną zablokowane nawet po zmianie układu. Po zmianie układu ponownie ocenią pozycje przewijania i w razie potrzeby ponownie dopasują je do najbliższej pozycji. Jeśli pasek przewijania był wcześniej przytwierdzony do elementu, który nadal istnieje po zmianie układu, spróbuje do niego wrócić. Zwróć uwagę na to, co dzieje się, gdy zmienia się układ w tym przykładzie.
NOPE i zmianie orientacji urządzenia z pionowej na poziomą wyświetla się pusty ekran, co oznacza, że pozycja przyciągania przy przewijaniu została utracona.
NOPE pozostaje widoczny, mimo że orientacja urządzenia zmienia się wiele razy.
Więcej informacji znajdziesz w sekcji na temat ponownego przyciągania po zmianach układu.
Przykład: przyklejone suwaki
Dzięki funkcji „Dopasowanie po zmianie układu” deweloperzy mogą stosować przyklejone suwaki za pomocą kilku linii kodu CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Chcesz dowiedzieć się więcej? Aby zobaczyć wizualizacje, przejdź do demonstracji interfejsu użytkownika czatu.
Przyszłe zadania
Wszystkie efekty ponownego przyciągania są obecnie natychmiastowe. Możliwe jest, że w przyszłości dodamy obsługę ponownego przyciągania z efektami płynnego przewijania. Aby dowiedzieć się więcej, zapoznaj się z problemami ze specyfikacją.
Prześlij opinię
Twoja opinia jest bezcenna, ponieważ pomoże nam ulepszać funkcję ponownego przyciągania elementów po zmianie układu. Wypróbuj tę funkcję i powiedz inżynierom z Chromium, co o niej myślisz.