Dipublikasikan: 4 September 2026
Fitur "penampung scroll satu sumbu" memperluas properti CSS overflow untuk mendukung nilai yang dapat di-scroll (auto, scroll, hidden) yang dikombinasikan dengan clip (misalnya, overflow: scroll clip), sehingga menghasilkan penampung scroll hanya untuk satu sumbu.
Meskipun perubahan ini membuka fitur yang sangat banyak diminta seperti penempatan tetap per sumbu, perubahan ini juga menimbulkan efek samping tambahan di seluruh fitur yang bergantung pada scroll. Karena potensi risiko kompatibilitas ini, kami meminta developer untuk menguji situs mereka dan memberikan masukan sebelum fitur ini diluncurkan ke saluran stabil.
Fitur ini tersedia untuk pengujian developer di Chrome 153 pada saluran rilis Beta, Dev, dan Canary. Anda tidak perlu mengaktifkan tanda.
Keanehan dengan setelan overflow pada satu sumbu
Tanpa fitur ini, tidak mungkin membuat penampung scroll satu sumbu yang sebenarnya dengan CSS. Jika Anda mengonfigurasi satu sumbu untuk men-scroll sambil mencoba mempertahankan sumbu lainnya tetap terlihat (misalnya, menyetel overflow-x: scroll dan membiarkan overflow-y: visible), mesin gaya browser akan otomatis memaksa sumbu yang terlihat untuk menghitung ke auto (atau scroll). Hal ini akan membuat scroller dua dimensi meskipun Anda tidak bermaksud melakukannya.
Keanehan ini akan sangat terlihat saat mencoba membuat tabel dengan baris atas tetap dan kolom pertama tetap. Pada contoh berikut, tujuannya adalah agar kolom pertama tetap berada di .table-wrapper yang di-scroll secara horizontal, dan baris atas tetap berada di scroller dokumen.
<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;
}
Jika Anda mencobanya, Anda akan melihat bahwa tombol tersebut tidak berfungsi. Hal ini karena keanehan overflow yang dijelaskan sebelumnya: .table-wrapper secara efektif menjadi scroller dua dimensi. Jadi, saat position: sticky mencari pen-scroll ancestor terdekat untuk setiap sumbu, hasilnya adalah elemen .table-wrapper dalam kedua kasus.
Demo Langsung
Rekaman Demo
Penampung scroll sumbu tunggal memperbaiki keanehan ini
Dengan penampung scroll sumbu tunggal, Anda dapat secara eksplisit mencegah sumbu sekunder menjadi scroller menggunakan clip. Dengan begitu, position: sticky dapat melacak dua penampung scroll yang berbeda secara independen.
Untuk memperbaiki contoh tabel, pasangkan scroll horizontal dengan overflow-y: clip.
.table-wrapper {
overflow-x: auto;
overflow-y: clip;
}
Atau, menggunakan singkatan overflow:
.table-wrapper {
overflow: auto clip;
}
Dengan melakukannya, .table-wrapper hanya bertindak sebagai penampung scroll untuk sumbu x. Baris atas yang tetap akan melewatinya dan tetap menempel dengan benar pada penggeser dokumen di sumbu y, sementara kolom pertama terus menempel pada .table-wrapper secara horizontal.
Jika Anda melihat postingan ini di browser dengan dukungan, Anda dapat melihatnya beraksi di demo berikut:
Demo Langsung
Rekaman Demo
Perilaku yang terpengaruh
Karena penampung scroll sumbu tunggal mengubah cara konteks scrolling dievaluasi dan dibuat, Anda mungkin melihat perubahan di seluruh fitur lain yang mengandalkan penampung scroll, seperti:
position: sticky: Seperti yang ditunjukkan, elemen kini akan tetap berada dalam penampung scroll sumbu tunggal dengan benar, sehingga meningkatkan perilaku untuk elemen yang dibatasi olehoverflow: clippada satu sumbu.overscroll-behavior: Karena elemen kini dapat menjadi penampung scroll hanya pada satu sumbu,overscroll-behaviormungkin tidak lagi dipicu pada sumbu yang terpotong, yang berpotensi memengaruhi efek tarik untuk memperbarui atau efek pantulan kustom. Perubahan perilaku ini cocok dengan Firefox dan Safari.- Scrolling terprogram: Memanggil API scroll (seperti
Element.scrollTo()) pada penampung scroll sumbu tunggal kini menerapkan batasan scroll terprogram. Elemen akan menolak untuk men-scroll secara terprogram di sepanjang sumbu yang ditentukan sebagai klip. - Penyesuaian ukuran sel minimum petak dan Flex: Untuk penampung scroll dalam tata letak petak dan flex, ukuran minimum default (
min-width: auto) biasanya diabaikan agar sel dapat menyesuaikan diri dengan ruang yang tersedia. Jikaoverflow: clipditetapkan pada sumbu yang sama, ukuran minimum default akan mulai berpengaruh, yang berpotensi menyebabkan penampung flex atau petak tumbuh lebih besar.
Deteksi fitur
Untuk mendeteksi dukungan untuk penampung scroll sumbu tunggal, kueri aturan @supports named-feature() menggunakan kata kunci single-axis-scroll-container.
@supports named-feature(single-axis-scroll-container) {
/* Feature is supported */
}
Seperti yang dibahas dalam masalah CSSWG #13677, penggunaan named-feature(single-axis-scroll-container) adalah cara standar yang direkomendasikan untuk mendeteksi kemampuan ini, karena pemeriksaan menggunakan @supports (overflow: scroll clip) saja hanya berupa pemeriksaan parsing, yang tidak mendeteksi apakah browser menangani perilaku scrolling satu sumbu yang direvisi dengan benar atau tidak.
Di JavaScript, gunakan CSS.supports("named-feature(single-axis-scroll-container)") untuk melakukan pemeriksaan ini.
Masukan diperlukan
Untuk menilai potensi risiko kompatibilitas, pengujian telah dilakukan di 190 situs. Berdasarkan analisis ini, perubahan tersebut tampaknya tidak menyebabkan kerusakan yang signifikan.
Namun, karena penampung scroll sumbu tunggal pada dasarnya mengubah cara konteks scrolling dievaluasi, cakupan yang lebih luas akan diterapkan. Anda diminta untuk menguji situs dan aplikasi web di channel Chrome yang tidak stabil untuk membantu mengidentifikasi kasus ekstrem sebelum fitur ini diluncurkan ke versi stabil.
Jika semuanya mulai rusak bagi Anda, atau jika Anda mengalami perilaku scrolling yang tidak terduga, laporkan bug Chromium.