CSS overflow-anchor
La proprietà CSS overflow-anchor in CSS3 controlla l'ancoraggio dello scroll
La proprietà overflow-anchor è parte del modulo CSS Scroll Anchoring (CSS3) e viene utilizzata per gestire l'ancoraggio del contenuto in fase di scorrimento. È utile per evitare "scroll jumps" quando il contenuto viene aggiornato dinamicamente, specialmente nelle interfacce moderne con dati in tempo reale.
Sintassi
Significato dei valori principali:
-
auto: (valore predefinito) abilita l'ancoraggio dello scorrimento, permettendo al browser di mantenere stabile la posizione di scroll durante modifiche dinamiche del contenuto.
-
none: disattiva l'ancoraggio dello scorrimento, permettendo lo spostamento della posizione di scroll in risposta a modifiche del contenuto.
Esempio proprietà: overflow-anchor
Codice Esempio: overflow-anchor
.scroll-container {
height: 200px;
overflow-y: auto;
border: 2px solid #ccc;
padding: 10px;
overflow-anchor: none;
background-color: #f9f9f9;
}.content-block {
height: 100px;
background-color: #50a14f;
margin-bottom: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
Contenuto Esempio: overflow-anchor
Esempio di utilizzo di overflow-anchor
Nel seguente esempio, disabilitiamo l'ancoraggio dello scroll in un contenitore che viene aggiornato dinamicamente, evitando salti di scroll indesiderati:
CSS e HTML per il contenitore con overflow-anchor: none:
<style>
.scroll-container {
height: 200px;
overflow-y: auto;
border: 2px solid #ccc;
padding: 10px;
overflow-anchor: none;
background-color: #f9f9f9;
}
.content-block {
height: 100px;
background-color: #50a14f;
margin-bottom: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
</style>
<div class="scroll-container">
<div class="content-block">Blocco 1</div>
<div class="content-block">Blocco 2</div>
<div class="content-block">Blocco 3</div>
<!-- Nuovi blocchi potrebbero essere aggiunti dinamicamente -->
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
