overflow-anchorProprietatea ne permite să renunțați la Derulați Ancorarea, care este o caracteristică browser - ul destinat să permită încărcarea conținutului de mai sus locației DOM actuale a utilizatorului , fără a schimba locația utilizatorului odată ce conținutul a fost complet încărcată.
De ce avem nevoie
Scroll Anchoring este o caracteristică a browserului care încearcă să prevină o situație obișnuită în care puteți derula în jos o pagină web înainte ca DOM-ul să fie încărcat complet și, atunci când se întâmplă, orice elemente care se încarcă deasupra locației dvs. actuale vă împing mai jos în pagină.
Are sens de ce s-ar întâmpla acest lucru. Există proprietăți CSS pe care le aplicăm elementelor care le dau dimensiune (ex. width), Formă (ex. transform) Și poziție (ex margin.). Dacă elementele respective nu s-au încărcat până când am derulat pagina, DOM le va continua să le încarce, chiar dacă se află în afara ferestrei noastre curente și se va extinde fizic pentru a face loc acelor elemente proaspăt încărcate. Pe măsură ce DOM crește, poziția noastră pe pagină se modifică pentru a se potrivi acelor elemente.
Scroll Anchoring împiedică această experiență de „sărituri” prin blocarea poziției utilizatorului pe pagină în timp ce au loc modificări în DOM deasupra locației curente. Acest lucru permite utilizatorului să rămână ancorat acolo unde se află pe pagină, chiar dacă elemente noi sunt încărcate în DOM.
overflow-anchorProprietatea ne permite să renunțați Funcția de defilare Ancorarea în cazul în care este de preferat pentru a permite conținutului să fie re-flux ca elemente sunt încărcate.
Sintaxă
article ( overflow-anchor: (auto | none ); )Valori
overflow-anchorProprietatea acceptă două valori , care , în esență , de comutare , dacă este sau nu este activată caracteristica.
auto(implicit): activează ancorarea defilării pe porțiunea paginii sau a elementului pe care este aplicată.none: Dezactivează ancorarea derulării parțial sau totală a unei pagini web sau exclude porțiuni din DOM de la ancorare, permițând reîncărcarea conținutului.
Probabil că veți aplica acest lucru la body, dar îl puteți aplica oricărui selector și va intra în vigoare dacă acel element se derulează.
Demo
În această demonstrație, de îndată ce derulați într-una dintre casete, aceasta va adăuga o grămadă de casete verzi în partea de sus a div. În mod normal, acest lucru ar împinge conținutul în jos imediat, potențial fiind o distragere a atenției și pierzându-ți locul în text. Cu overflow-anchor: auto;, locul de defilare este păstrat. overflow-anchor: none;permite divizorilor nou introduși să afecteze poziția de derulare.
Vedeți Pen overflow-anchor de Chris Coyier (@chriscoyier) pe CodePen.
Un alt lucru care se poate face, care poate fi foarte util este fixarea poziției de derulare a unui element în partea de jos. De exemplu, o aplicație de chat în care mesajele noi sunt atașate la DOM în partea de jos și doriți ca poziția de derulare să rămână în partea de jos, afișând toate mesajele noi:
Vedeți
defilarea „Rămâneți în partea de jos” a stiloului cu scroll-anchor de Chris Coyier (@chriscoyier)
pe CodePen.
Suport pentru browser
Începând cu această scriere, overflow-anchornu este un standard W3C actual, deși proiectul de raport al specificației propuse este disponibil pentru citire și a fost adoptat de Chrome de la versiunea 56. Mozilla are în vedere o caracteristică similară în Firefox. Pe măsură ce mai multe browsere adoptă funcția Scroll Anchoring, ne putem aștepta să vedem mai multă asistență pentru browser, overflow-anchordeoarece oferă control explicit pentru a renunța la funcție.
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 56 | 66 | Nu | 79 | Nu |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | Nu |
Mai multe informatii
- Scroll Anchoring: schiță propusă a specificației Scroll Anchoring
- Chromium Blog: Postarea pe blogul care anunță includerea Chrome de Scroll Anchoring și proprietatea CSS în versiunea 56
- Bugzilla Ticket # 43114: Open ticket to include the property in Firefox