Ta overflow-anchorwłaściwość pozwala nam zrezygnować z zakotwiczenia przewijania, czyli funkcji przeglądarki, która umożliwia ładowanie treści powyżej bieżącej lokalizacji DOM użytkownika bez zmiany lokalizacji użytkownika po całkowitym załadowaniu treści.
Dlaczego tego potrzebujemy
Kotwiczenie przewijania to funkcja przeglądarki, która próbuje zapobiec typowej sytuacji, w której możesz przewijać stronę w dół, zanim DOM zostanie w pełni załadowany, a kiedy to nastąpi, wszelkie elementy, które ładują się powyżej Twojej bieżącej lokalizacji, popychają Cię dalej w dół strony.
To ma sens, dlaczego tak się stało. Istnieją właściwości CSS, które stosujemy do elementów, które nadają im rozmiar (np. width), Kształt (np. transform) I położenie (np margin.). Jeśli te elementy nie zostały załadowane do czasu, gdy przewinęliśmy stronę w dół, DOM będzie je wczytywał, mimo że znajdują się poza naszym bieżącym obszarem wyświetlania i fizycznie się rozszerzy, aby zrobić miejsce dla tych świeżo załadowanych elementów. Wraz z rozwojem DOM, nasza pozycja na stronie zmienia się, aby pomieścić te elementy.
Kotwiczenie przewijania zapobiega „przeskakiwaniu” przez blokowanie pozycji użytkownika na stronie, podczas gdy zmiany zachodzą w DOM powyżej bieżącej lokalizacji. Pozwala to użytkownikowi pozostać zakotwiczonym w miejscu, w którym się znajduje na stronie, nawet gdy nowe elementy są ładowane do DOM.
Ta overflow-anchorwłaściwość pozwala nam zrezygnować z funkcji kotwiczenia przewijania w przypadku, gdy preferowane jest zezwolenie na ponowne przepływanie treści podczas ładowania elementów.
Składnia
article ( overflow-anchor: (auto | none ); )Wartości
overflow-anchorNieruchomość przyjmuje dwie wartości, które w zasadzie przełączania czy funkcja jest włączona.
auto(domyślnie): Włącza zakotwiczenie przewijania w części strony lub elemencie, na którym jest zastosowane.none: Wyłącza zakotwiczenie przewijania w części lub w całości strony internetowej lub wyklucza zakotwiczenie części DOM z kotwiczenia, umożliwiając ponowne wlanie treści.
Prawdopodobnie zastosowałbyś to do body, ale możesz ustawić zakres do dowolnego selektora i zadziała, jeśli ten element się przewinie.
Próbny
W tej wersji demonstracyjnej, gdy tylko przewiniesz jedno z pól, doda kilka zielonych pól na górze tego elementu div. Zwykle spowodowałoby to natychmiastowy spadek zawartości, potencjalnie stanowiąc ogromne rozproszenie uwagi i utratę miejsca w tekście. Po overflow-anchor: auto;wybraniu miejsce przewijania zostaje zachowane. overflow-anchor: none;umożliwia nowo wstawionym elementom div wpływ na pozycję przewijania.
Zobacz kotwicę przepełnienia pióra autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Inną rzeczą, którą można zrobić, która może być bardzo przydatna, jest przypięcie pozycji przewijania elementu do dołu. Na przykład aplikacja do czatu, w której nowe wiadomości są dołączane do DOM na dole i chcesz, aby pozycja przewijania pozostała na dole, pokazując wszystkie nowe wiadomości:
Zobacz
przewijanie pióra „Zostań na dole” z przewijaniem kotwicy autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.
Wsparcie przeglądarki
W chwili pisania tego tekstu overflow-anchornie jest to aktualny standard W3C, chociaż szkic raportu proponowanej specyfikacji jest dostępny do przeczytania i został przyjęty przez Chrome od wersji 56. Mozilla rozważa podobną funkcję w Firefoksie. Ponieważ coraz więcej przeglądarek przyjmuje funkcję zakotwiczenia przewijania, możemy spodziewać się większej obsługi przeglądarki, overflow-anchorponieważ zapewnia ona wyraźną kontrolę nad rezygnacją z tej funkcji.
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 56 | 66 | Nie | 79 | Nie |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nie |
Więcej informacji
- Zakotwiczenie przewijania: proponowana wersja robocza specyfikacji zakotwiczenia przewijania
- Blog Chromium: post na blogu, w którym ogłoszono włączenie w Chrome funkcji kotwiczenia przewijania i właściwości CSS w wersji 56
- Bilet Bugzilli nr 43114: Otwórz bilet, aby uwzględnić nieruchomość w przeglądarce Firefox