Toto overflow-anchorvlastníctvo nám umožňuje deaktivovať funkciu Scroll Anchoring, čo je funkcia prehliadača, ktorá umožňuje načítať obsah nad aktuálnym umiestnením DOM používateľa bez toho, aby sa po úplnom načítaní obsahu zmenilo jeho umiestnenie.
Prečo to potrebujeme
Scroll Anchoring je funkcia prehľadávača, ktorá sa pokúša zabrániť bežnej situácii, keď môžete posúvať webovú stránku nadol skôr, ako sa doména DOM úplne načíta, a ak sa tak stane, všetky prvky, ktoré sa načítajú nad vašu aktuálnu polohu, vás posunú ďalej nadol po stránke.
Dáva to zmysel, prečo by sa to stalo. Existujú vlastnosti CSS, ktoré aplikujeme na prvky, ktoré im dávajú veľkosť (napr. width), Tvar (napr. transform) A polohu (napr. margin). Ak sa tieto prvky nenačítali v čase, ktorý sme posúvali nadol po stránke, DOM ich bude naďalej načítavať, aj keď sú mimo nášho súčasného výrezu, a fyzicky sa rozšíria, aby vytvorili priestor pre tieto čerstvo načítané prvky. Ako DOM rastie, naša pozícia na stránke sa mení tak, aby vyhovovala týmto prvkom.
Posuvné ukotvenie zabráni tomu, aby skákanie prešlo uzamknutím polohy používateľa na stránke, zatiaľ čo v DOM nad aktuálnym umiestnením prebiehajú zmeny. To umožňuje používateľovi zostať ukotveným tam, kde sa nachádza na stránke, aj keď sa do DOM načítajú nové prvky.
Táto overflow-anchorvlastnosť nám umožňuje deaktivovať funkciu Scroll Anchoring v prípade, že je lepšie povoliť opätovné prúdenie obsahu pri načítaní prvkov.
Syntax
article ( overflow-anchor: (auto | none ); )Hodnoty
overflow-anchorVlastnosť prijíma dve hodnoty, ktoré v podstate prepne, či je alebo nie je povolená funkcia.
auto(predvolené): Povolí ukotvenie rolovania na časti stránky alebo prvku, na ktorom je aplikovaný.none: Zakáže kotvenie rolovania na časti alebo na celej webovej stránke, alebo vylúči časti DOM z ukotvenia, čo umožní opätovnému preformátovaniu obsahu.
Pravdepodobne by ste to použili na body, ale môžete ho rozšíriť na ľubovoľný selektor a prejaví sa, ak sa bude tento prvok posúvať.
Ukážka
V tejto ukážke, akonáhle prejdete jedným z políčok, pridá sa na začiatok tejto časti hromada zelených polí. Za normálnych okolností by to okamžite vytlačilo obsah, čo by mohlo byť veľkým rozptýlením a stratou miesta v texte. Pomocou overflow-anchor: auto;, miesto rolovania je zachované. overflow-anchor: none;umožňuje novo vloženým prvkom div ovplyvniť pozíciu rolovania.
Prezrite si kotvu na pretečenie pera od Chrisa Coyiera (@chriscoyier) na CodePen.
Ďalšou vecou, ktorá môže byť superduper užitočná, je posunutie rolovacej polohy prvku dole. Napríklad chatovacia aplikácia, v ktorej sú do DOM pridané nové správy, a chcete, aby pozícia posuvu zostala v dolnej časti a zobrazovala všetky nové správy:
Pozrite sa na pero
„Zostaňte dole“, ktoré sa posúva pomocou kotvy posuvu od Chrisa Coyiera (@chriscoyier)
na stránke CodePen.
Podpora prehľadávača
Od tohto písania overflow-anchornejde o aktuálny štandard W3C, hoci návrh správy navrhovanej špecifikácie je k dispozícii na čítanie a bol prijatý prehliadačom Chrome od verzie 56. Mozilla uvažuje o podobnej funkcii aj vo Firefoxe. Keď si viac prehliadačov osvojí funkciu Scroll Anchoring, môžeme očakávať, že sa dočkáme väčšej podpory prehliadačov, overflow-anchorpretože poskytuje výslovnú kontrolu nad deaktiváciou tejto funkcie.
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 56 | 66 | Nie | 79 | Nie |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nie |
Viac informácií
- Scroll Anchoring: Navrhovaný koncept špecifikácie Scroll Anchoring
- Chromium Blog: Príspevok na blogu, ktorý oznamuje zaradenie aplikácie Scroll Anchoring a vlastnosti CSS do verzie 56 prehliadačom Chrome
- Bugzilla Ticket # 43114: Otvorený lístok na zahrnutie nehnuteľnosti do prehliadača Firefox