Pronto per i test degli sviluppatori: contenitori di scorrimento a un solo asse

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Data di pubblicazione: 4 settembre 2026

La funzionalità "container di scorrimento a un solo asse" estende la proprietà CSS overflow per supportare i valori scorrevoli (auto, scroll, hidden) combinati con clip (ad esempio, overflow: scroll clip), creando container di scorrimento per un solo asse.

Sebbene questa modifica sblocchi funzionalità molto richieste, come il posizionamento sticky per asse, introduce anche effetti collaterali aggiuntivi in altre funzionalità che dipendono dallo scorrimento. A causa di questi potenziali rischi di compatibilità, chiediamo agli sviluppatori di testare i propri siti web e fornire feedback prima che questa funzionalità venga implementata nei canali stabili.

La funzionalità è disponibile per i test degli sviluppatori in Chrome 153 sui canali di rilascio beta, Dev e Canary. Non è necessario attivare un flag.

Il problema con l'impostazione dell'overflow su un asse

Senza questa funzionalità, era impossibile creare un container di scorrimento a un solo asse con CSS. Se configuri un asse per lo scorrimento mentre tenti di mantenere visibile l'altro asse (ad esempio, impostando overflow-x: scroll e lasciando overflow-y: visible), il motore di stili del browser forza automaticamente l'asse visibile a calcolare auto (o scroll). In questo modo, viene creato uno scroller bidimensionale anche se non era tua intenzione.

Questo problema diventa molto evidente quando si tenta di creare una tabella con una riga superiore sticky e una prima colonna sticky. Nell'esempio seguente, l'obiettivo è che la prima colonna rimanga fissa al .table-wrapper che scorre orizzontalmente e che la riga superiore rimanga fissa allo scroller del documento.

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

/* Scroll horizontally */
.table-wrapper {
  overflow-x: auto;
}

/* Sticky top row */
.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* Sticky first column */
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

Se provi, noterai che non funziona. Questo è dovuto al problema di overflow descritto in precedenza: il .table-wrapper diventa effettivamente uno scroller bidimensionale. Pertanto, quando position: sticky cerca lo scroller predecessore più vicino per ogni asse, il risultato è l'elemento .table-wrapper in entrambi i casi.

Demo live

Registrazione della demo

I container di scorrimento a un solo asse risolvono il problema

Con i container di scorrimento a un solo asse, puoi impedire esplicitamente che l'asse secondario diventi uno scroller utilizzando clip. In questo modo, position: sticky può monitorare due container di scorrimento diversi in modo indipendente.

Per correggere l'esempio della tabella, associa lo scorrimento orizzontale a overflow-y: clip.

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

In alternativa, puoi utilizzare la proprietà abbreviata overflow:

.table-wrapper {
  overflow: auto clip;
}

In questo modo, il .table-wrapper funge da container di scorrimento solo per l'asse x. La riga superiore sticky ora lo ignorerà e rimarrà correttamente fissa allo scroller del documento sull'asse y, mentre la prima colonna continuerà a rimanere fissa al .table-wrapper orizzontalmente.

Se stai leggendo questo post in un browser con supporto, puoi vederlo in azione in nella seguente demo:

Demo live

Registrazione della demo

Comportamenti interessati

Poiché i container di scorrimento a un solo asse modificano la modalità di valutazione e creazione dei contesti di scorrimento, potresti notare modifiche in altre funzionalità che si basano sui container di scorrimento, ad esempio:

  • position: sticky: come mostrato, gli elementi ora rimarranno correttamente fissi all'interno dei container di scorrimento a un solo asse, migliorando i comportamenti degli elementi vincolati da overflow: clip su un asse.
  • overscroll-behavior: poiché un elemento ora può essere un container di scorrimento su un solo asse, overscroll-behavior potrebbe non essere più attivato sull'asse ritagliato, il che potrebbe influire sugli effetti personalizzati di pull-to-refresh o di rimbalzo. Questa modifica del comportamento corrisponde a Firefox e Safari.
  • Scorrimento programmatico: la chiamata delle API di scorrimento (come Element.scrollTo()) su un container di scorrimento a un solo asse ora applica i vincoli di scorrimento programmatici. L'elemento si rifiuterà di scorrere in modo programmatico lungo l'asse definito come clip.
  • Dimensionamento minimo delle celle di griglia e flex: per i container di scorrimento nel layout a griglia e flex, la dimensione minima predefinita (min-width: auto) viene normalmente ignorata per consentire alle celle di adattarsi allo spazio disponibile. Quando overflow: clip è impostato sullo stesso asse, la dimensione minima predefinita inizierà ad avere un effetto, il che potrebbe causare l'ingrandimento del container flex o griglia.

Rilevamento delle funzionalità

Per rilevare il supporto per i container di scorrimento a un solo asse, esegui una query sulla @supports named-feature() regola utilizzando la single-axis-scroll-container parola chiave.

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

Come discusso nel problema CSSWG n. 13677, l'utilizzo di named-feature(single-axis-scroll-container) è il modo standard consigliato per rilevare questa funzionalità, poiché il controllo tramite @supports (overflow: scroll clip) è solo un controllo di analisi, che non rileva se il browser gestisce correttamente o meno i comportamenti di scorrimento a un solo asse rivisti.

In JavaScript, utilizza CSS.supports("named-feature(single-axis-scroll-container)") per eseguire questo controllo.

Inviaci il tuo feedback

Per valutare i potenziali rischi di compatibilità, sono stati condotti test su 190 siti web. In base a questa analisi, le modifiche non sembrano introdurre interruzioni significative.

Tuttavia, poiché i container di scorrimento a un solo asse modificano radicalmente la modalità di valutazione dei contesti di scorrimento, viene applicato un approccio più ampio. Ti invitiamo a testare siti web e applicazioni web sui canali Chrome non stabili per contribuire a identificare eventuali casi limite prima che questa funzionalità venga implementata nella versione stabile.

Se le cose iniziano a non funzionare o se riscontri un comportamento di scorrimento imprevisto, segnala un bug di Chromium.