Proprietà CSS overflow-anchor

La proprietà CSS overflow-anchor controlla se la funzionalità di scroll anchoring del browser si applica a un elemento. Lo scroll anchoring mantiene stabile la posizione di lettura quando il contenuto sopra il viewport cambia dimensione, evitando che la pagina scatti sotto di te. La proprietà overflow-anchor consente di rinunciare a questo comportamento quando causa problemi.

Questa pagina illustra cosa risolve lo scroll anchoring, i due valori di overflow-anchor, quando disabilitarlo e il supporto browser su cui puoi contare.

Cosa risolve lo scroll anchoring

Immagina di stare leggendo un articolo e che un annuncio, un'immagine o un commento caricato in modo differito appaia improvvisamente sopra la tua posizione di scorrimento attuale. Senza lo scroll anchoring, quel contenuto appena inserito spingerebbe tutto verso il basso e il testo che stavi leggendo salterebbe via. È una delle esperienze più fastidiose sul web.

Lo scroll anchoring risolve questo problema scegliendo un elemento del DOM vicino alla parte superiore del viewport come ancora, quindi adeguando l'offset di scorrimento dopo una modifica del layout in modo che quell'elemento rimanga visivamente fisso. Continui a leggere la stessa riga; il contenuto inserito si espande silenziosamente sopra. I browser moderni abilitano questa funzione per impostazione predefinita — di solito non ci pensi perché funziona e basta.

overflow-anchor è la tua via d'uscita. Non attiva lo scroll anchoring (è già attivo); consente solo di disattivarlo per un sottoalbero dove la regolazione automatica causa problemi.

Valori della proprietà

overflow-anchor accetta due valori reali più le parole chiave CSS globali:

Da notare che overflow-anchor non viene ereditata per impostazione predefinita, ma impostarla su none su un antenato sopprime efficacemente l'ancoraggio per l'intero sottoalbero.

Sintassi

overflow-anchor: auto | none | initial | inherit;

Per disabilitare lo scroll anchoring per un intero documento, applica none alla radice:

body {
  overflow-anchor: none;
}

Più comunemente si limita l'applicazione al solo contenitore problematico:

.live-feed {
  overflow-anchor: none;
}

Quando disabilitare l'ancoraggio

La maggior parte delle volte dovresti lasciare l'ancoraggio attivo — disabilitarlo riporta il problema dei salti di contenuto che era stato progettato per prevenire. Usa overflow-anchor: none solo in casi specifici:

• Scroll infinito che antepone elementi. Una finestra di chat o un feed "carica messaggi precedenti" che inserisce contenuto in cima può talvolta entrare in conflitto con l'ancoraggio. Se gestisci manualmente la posizione di scorrimento con JavaScript, la regolazione automatica dell'ancoraggio può correggere due volte e causare uno scatto.
• Animazioni personalizzate di tracciamento dello scroll. Se leggi scrollTop a ogni frame per gestire un effetto parallasse o di avanzamento, una regolazione dell'ancoraggio può introdurre un offset inatteso.
• Log "rimani in fondo" con posizione fissa. Un log in stile terminale che dovrebbe sempre mostrare la riga più recente in basso può essere più facile da gestire senza che l'ancoraggio interferisca.

In ognuno di questi casi, prova prima con l'ancoraggio attivo — potrebbe non essere necessario disabilitarlo affatto.

Impostarlo tramite JavaScript

Puoi attivare o disattivare l'ancoraggio in fase di esecuzione tramite il DOM:

// Disable scroll anchoring on the feed container
const feed = document.querySelector(".live-feed");
feed.style.overflowAnchor = "none";

// Re-enable it later
feed.style.overflowAnchor = "auto";

Supporto browser e degradazione controllata

overflow-anchor (e lo scroll anchoring in generale) è supportato in Chrome, Edge, Firefox e altri browser basati su Chromium. Safari storicamente non ha implementato lo scroll anchoring, quindi la proprietà non ha effetto lì — le pagine si comportano semplicemente come se l'ancoraggio fosse disattivato.

Poiché la proprietà si limita a rimuovere un comportamento utile ma non essenziale, non c'è niente da polyfillare e nessun fallback da scrivere: nei browser non supportati overflow-anchor: none è innocuo e viene ignorato.

Proprietà correlate

• overflow — la scorciatoia che decide se il contenuto in overflow viene ritagliato, scorso o reso visibile.
• overflow-x e overflow-y — controllano l'overflow su ciascun asse in modo indipendente.
• scroll-behavior — fa sì che lo scorrimento (ad es. verso le ancore) sia animato senza salti.
• position — si abbina ai layout sticky/fixed che spesso coesistono con regioni scorrevoli.

Pratica