Przyciąganie przewijane po zmianie układu

Od wersji 81 Chrome nie musisz już dodawać odbiorników zdarzeń, aby wymusić ponowne przechwytywanie.

CSS Scroll Snap pozwala deweloperom tworzyć dobrze kontrolowane przewijanie, deklarując pozycje zatrzymywania przewijania. Jednym z mankamentów obecnego rozwiązania jest to, że przyciąganie przy przewijaniu nie działa prawidłowo, gdy zmienia się układ, np. gdy zmienia się rozmiar widocznego obszaru lub obraca urządzenie. 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 Scroll Snap w CSS?.

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 deweloperom tworzyć dobrze kontrolowane efekty przewijania przez deklarowanie pozycji 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 niewygodnemu przewijaniu.
  • Tworzy efekt przewijania treści.

Strony z artykułami podzielonymi na strony i karuzele obrazów to 2 typowe zastosowania animacji przewijania.

Przykład zablokowania przewijania za pomocą CSS
Przykład zablokowania przewijania za pomocą kodu CSS. Na końcu przewijania środek obrazu w osi poziomej jest wyrównany do środka osi poziomej kontenera przewijania.

Wady

Pozycje przyciągania są tracone, gdy zmieniasz rozmiar okna.

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 niedoskonałości, 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 odbiorników, które wykonują programowe przewijanie za pomocą JavaScriptu, aby wymusić działanie przyciągania, gdy tylko wystąpią jakiekolwiek z wymienionych zmian układu. To obejście może być nieskuteczne, gdy użytkownik oczekuje, że suwak wróci do tych samych treści. Dalsze przetwarzanie za pomocą JavaScriptu wydaje się nie mieć sensu w przypadku 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 się do niego przypiąć. Zwróć uwagę na to, co dzieje się, gdy zmienia się układ w tym przykładzie.

utrata pozycji przyciągania;
Obrócenie urządzenia nie nie powoduje zachowania pozycji przyciągania w Chrome 80. Po przewinięciu do slajdu z napisem NOPE i zmianie orientacji urządzenia z pionowej na poziomą pojawia się pusty ekran, co oznacza, że pozycja przyciągania przy przewijaniu została utracona.
Zachowana pozycja przyciągania
Obrócenie urządzenia nie nie powoduje zachowania pozycji przyciągania w Chrome 81. Folia z napisem NOPE pozostaje widoczna, mimo że orientacja urządzenia zmienia się wielokrotnie.

Więcej informacji znajdziesz w specyfikacji Ponowna synchronizacja 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.

Dodanie nowej wiadomości powoduje ponowne przycięcie, dzięki któremu zostaje ona przypięta na dole w Chrome 81.

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. Szczegóły znajdziesz w problemie 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 podaj opinię programistom Chromium.