La overflow-anchorproprietà ci consente di disattivare l'ancoraggio a scorrimento, una funzionalità del browser progettata per consentire il caricamento del contenuto sopra la posizione DOM corrente dell'utente senza modificare la posizione dell'utente una volta che il contenuto è stato completamente caricato.
Perché ne abbiamo bisogno
L'ancoraggio a scorrimento è una funzionalità del browser che tenta di prevenire una situazione comune in cui è possibile scorrere verso il basso una pagina Web prima che il DOM sia completamente caricato e, quando lo fa, qualsiasi elemento che viene caricato sopra la posizione corrente ti spinge più in basso nella pagina.
Ha senso perché questo accada. Ci sono proprietà CSS che applichiamo agli elementi che danno loro dimensione (es. width), Forma (es. transform) E posizione (es margin.). Se questi elementi non sono stati caricati entro il tempo in cui abbiamo fatto scorrere la pagina, il DOM continuerà a caricarli anche se sono fuori dalla nostra visualizzazione corrente e si espanderà fisicamente per fare spazio a quegli elementi appena caricati. Man mano che il DOM cresce, la nostra posizione sulla pagina cambia per adattarsi a questi elementi.
L'ancoraggio a scorrimento impedisce l'esperienza di "salto" bloccando la posizione dell'utente sulla pagina durante le modifiche in corso nel DOM sopra la posizione corrente. Ciò consente all'utente di rimanere ancorato nella posizione in cui si trova sulla pagina anche se nuovi elementi vengono caricati nel DOM.
La overflow-anchorproprietà ci consente di disattivare la funzione di ancoraggio a scorrimento nel caso in cui si preferisca consentire il ricircolo del contenuto durante il caricamento degli elementi.
Sintassi
article ( overflow-anchor: (auto | none ); )Valori
La overflow-anchorproprietà accetta due valori che essenzialmente alternano se la funzione è abilitata o meno.
auto(predefinito): Abilita l'ancoraggio dello scorrimento sulla porzione della pagina o dell'elemento su cui è applicato.none: Disattiva l'ancoraggio dello scorrimento in parte o in tutto una pagina web, oppure esclude parti del DOM dall'ancoraggio, consentendo al contenuto di scorrere nuovamente.
Probabilmente lo applicheresti a body, ma puoi spostarlo su qualsiasi selettore e avrà effetto se quell'elemento scorre.
Demo
In questa demo, non appena scorri in una delle caselle, aggiungerà un gruppo di caselle verdi all'inizio di quella div. Normalmente ciò spingerebbe immediatamente il contenuto verso il basso, potenzialmente rappresentando un'enorme distrazione e perdere il tuo posto nel testo. Con overflow-anchor: auto;, il luogo di scorrimento viene preservato. overflow-anchor: none;consente ai div appena inseriti di influenzare la posizione di scorrimento.
Guarda il Pen overflow-anchor di Chris Coyier (@chriscoyier) su CodePen.
Un'altra cosa che può essere fatta che può essere super utile è appuntare la posizione di scorrimento di un elemento in fondo. Ad esempio, un'app di chat in cui i nuovi messaggi vengono aggiunti al DOM in basso e desideri che la posizione di scorrimento rimanga in basso mostrando tutti i nuovi messaggi:
Guarda la penna
"Resta in fondo" che scorre con scroll-anchor di Chris Coyier (@chriscoyier)
su CodePen.
Supporto browser
Al momento della stesura di questo documento, overflow-anchornon è uno standard W3C corrente, sebbene la bozza di rapporto delle specifiche proposte sia disponibile per la lettura ed è stata adottata da Chrome dalla versione 56. Mozilla sta considerando una funzionalità simile in Firefox. Poiché più browser adottano la funzione di ancoraggio a scorrimento, potremmo aspettarci di vedere un maggiore supporto del browser overflow-anchorpoiché fornisce un controllo esplicito per disattivare la funzione.
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 56 | 66 | No | 79 | No |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | No |
Maggiori informazioni
- Scroll Anchoring: Proposta di bozza della specifica Scroll Anchoring
- Chromium Blog: il post del blog che annuncia l'inclusione di Chrome di Scroll Anchoring e della proprietà CSS nella versione 56
- Bugzilla Ticket # 43114: Apri il ticket per includere la proprietà in Firefox