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à "Contenitori di scorrimento a un solo asse" estende la proprietà CSS overflow per supportare valori scorrevoli (auto, scroll, hidden) combinati con clip (ad esempio, overflow: scroll clip), ottenendo contenitori di scorrimento per un solo asse.

Sebbene questa modifica sblocchi funzionalità molto richieste, come il posizionamento fisso per asse, introduce anche effetti collaterali aggiuntivi in altre funzionalità dipendenti 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 154 sui canali di rilascio beta, Dev e Canary. Non è necessario attivare un flag.

Il problema con l'impostazione del overflow su un asse

Senza questa funzionalità era impossibile creare un contenitore 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 stile del browser forza automaticamente l'asse visibile a calcolare auto (o scroll). In questo modo viene creato uno scorrimento bidimensionale anche se non era tua intenzione.

Questo problema diventa molto evidente quando si tenta di creare una tabella con una riga superiore e una prima colonna fisse. Nell'esempio seguente, l'obiettivo è che la prima colonna rimanga fissa nella .table-wrapper che scorre orizzontalmente e che la prima riga rimanga fissa rispetto alla barra di scorrimento 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 lo provi, noterai che non funziona. Ciò è dovuto alla particolarità dell'overflow descritta in precedenza: .table-wrapper diventa effettivamente uno scorrimento bidimensionale. Pertanto, quando position: sticky cerca lo scorrimento dell'antenato più vicino per ogni asse, il risultato è l'elemento .table-wrapper in entrambi i casi.

Demo live

Registrazione demo

I contenitori di scorrimento a un solo asse risolvono il problema.

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

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

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

In alternativa, utilizzando l'abbreviazione overflow:

.table-wrapper {
  overflow: auto clip;
}

In questo modo, .table-wrapper funge solo da contenitore di scorrimento per l'asse X. La riga superiore bloccata ora lo ignorerà e si bloccherà correttamente sullo scorrimento del documento sull'asse y, mentre la prima colonna continuerà a bloccarsi orizzontalmente su .table-wrapper.

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

Demo live

Registrazione demo

Comportamenti interessati

Poiché i contenitori di scorrimento a un solo asse modificano il modo in cui vengono valutati e creati i contesti di scorrimento, potresti notare modifiche in altre funzionalità che si basano sui contenitori di scorrimento, ad esempio:

  • position: sticky: come mostrato, gli elementi ora rimarranno correttamente all'interno dei contenitori di scorrimento a un solo asse, migliorando il comportamento degli elementi vincolati da overflow: clip su un asse.
  • overscroll-behavior: poiché ora un elemento può essere un contenitore di scorrimento su un solo asse, overscroll-behavior potrebbe non essere più attivato sull'asse ritagliato, il che potrebbe influire sugli effetti personalizzati di trascinamento per aggiornare 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 contenitore di scorrimento a un solo asse ora applica i vincoli di scorrimento programmatico. L'elemento si rifiuterà di scorrere in modo programmatico lungo l'asse definito come clip.
  • Dimensionamento minimo delle celle della griglia e di Flex: per i contenitori 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à a produrre un effetto, causando potenzialmente l'ingrandimento del contenitore flessibile o della griglia.

Rilevamento delle caratteristiche

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

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

Come discusso nel problema n. 13677 del CSSWG, 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) da solo è solo un controllo dell'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 contenitori di scorrimento a un solo asse alterano radicalmente il modo in cui vengono valutati i contesti di scorrimento, viene utilizzata una rete più ampia. Ti viene chiesto di 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.