Tato overflow-anchorvlastnost nám umožňuje odhlásit se z Scroll Anchoring, což je funkce prohlížeče, která má umožnit načítání obsahu nad aktuálním umístěním DOM uživatele, aniž by se změnilo umístění uživatele, jakmile byl tento obsah plně načten.
Proč to potřebujeme
Scroll Anchoring je funkce prohlížeče, která se pokouší zabránit běžné situaci, kdy můžete posouvat webovou stránku dolů, než se DOM plně načte, a pokud se tak stane, všechny prvky, které se načtou nad vaším aktuálním umístěním, vás posunou dále dolů po stránce.
Dává to smysl, proč by se to stalo. Existují vlastnosti CSS, které aplikujeme na prvky, které jim dávají velikost (např. width), Tvar (např. transform) A polohu (např. margin). Pokud se tyto prvky nenačetly v době, kdy jsme se posunuli dolů po stránce, DOM je bude i nadále načítat, i když jsou mimo náš aktuální výřez, a fyzicky se rozšíří, aby vytvořilo místo pro tyto čerstvě načtené prvky. Jak DOM roste, naše pozice na stránce se mění tak, aby vyhovovala těmto prvkům.
Posuvné ukotvení zabrání tomu, aby „skákání“ proběhlo uzamčením polohy uživatele na stránce, zatímco v DOM nad aktuálním místem probíhají změny. To umožňuje uživateli zůstat ukotven tam, kde je na stránce, i když jsou do DOM načteny nové prvky.
overflow-anchorVlastnost nám umožňuje opt-out funkce Scroll ukotvení v případě, že je výhodné, aby obsah, aby re-flow jako prvky jsou načteny.
Syntax
article ( overflow-anchor: (auto | none ); )Hodnoty
overflow-anchorVlastnost přijímá dvě hodnoty, které v podstatě přepne, zda je nebo není povolena funkce.
auto(výchozí): Povolí ukotvení posouvání na části stránky nebo prvku, na které je aplikován.none: Zakáže ukotvení posouvání na části nebo na celé webové stránce, nebo vyloučí části DOM z ukotvení, což umožní přeformátování obsahu.
Pravděpodobně byste to aplikovali na body, ale můžete jej rozšířit na libovolný selektor a projeví se, pokud se tento prvek posouvá.
Ukázka
V této ukázce, jakmile se posunete v jednom z polí, přidá do zeleného pole spoustu zelených polí. Za normálních okolností by to obsah okamžitě tlačilo dolů, což by mohlo být velkým rozptýlením a ztrátou místa v textu. Pomocí overflow-anchor: auto;je místo rolování zachováno. overflow-anchor: none;umožňuje nově vloženým divům ovlivnit polohu posouvání.
Podívejte se na přetečení kotvy pera Chris Coyier (@chriscoyier) na CodePen.
Další věc, kterou lze udělat, která může být super duper užitečná, je připnout polohu posouvání prvku na dno. Například chatovací aplikace, kde jsou do DOMu připojeny nové zprávy v dolní části a chcete, aby pozice posouvání zůstala dole a zobrazovala všechny nové zprávy:
Podívejte se
na posouvání pera „Zůstaňte dole“ pomocí posuvné kotvy od Chrisa Coyiera (@chriscoyier)
na CodePen.
Podpora prohlížeče
Od tohoto psaní overflow-anchornejde o aktuální standard W3C, i když je návrh zprávy navrhované specifikace k dispozici ke čtení a Chrome jej přijal od verze 56. Mozilla uvažuje o podobné funkci ve Firefoxu. Vzhledem k tomu, že více prohlížečů přijímá funkci Scroll Anchoring, můžeme očekávat, že uvidíme další podporu prohlížečů, overflow-anchorprotože poskytuje výslovnou kontrolu pro odhlášení z funkce.
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 56 | 66 | Ne | 79 | Ne |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
Více informací
- Scroll Anchoring: Navrhovaný koncept specifikace Scroll Anchoring
- Chromium Blog: Příspěvek blogu, který oznamuje, že Chrome obsahuje verzi Scroll Anchoring a vlastnost CSS ve verzi 56
- Bugzilla Ticket # 43114: Otevřete lístek a zahrňte vlastnost do Firefoxu