Overflow dan Scrolling

Chapter Overflow pada section Box Model sudah membahas nilai property-nya: visible, hidden, scroll, auto, dan clip. Chapter ini naik satu tingkat ke perilaku scrolling itu sendiri — apa yang berubah ketika sebuah elemen menjadi scroll container, bagaimana membuat lompatan tautan bergerak mulus, dan bagaimana mencegah gulir di dalam panel “bocor” menggulir seluruh halaman. Keempat topik ini muncul terus saat membangun panel catatan, drawer, dan modal.

Scroll Container: Viewport Kecil di Dalam Halaman #

Elemen dengan nilai overflow selain visible dan clip — auto, scroll, atau hidden — menjadi scroll container: kotak dengan area pandang sendiri. Gulir terjadi di dalam elemen tersebut, bukan di halaman; kontennya bisa jauh lebih tinggi dari kotaknya dan tetap terjangkau lewat gulir. Status ini punya dampak ke property lain: position: sticky di dalamnya menempel terhadap scroll container terdekat, dan perilaku gulirnya sendiri bisa dikonfigurasi lewat property-property berikut.

scroll-behavior: smooth #

Secara default, tautan anchor (<a href="#bagian-2">) dan gulir programatik memindahkan posisi dalam satu lompatan. scroll-behavior: smooth mengganti lompatan itu dengan animasi yang halus. Property ini dipasang pada elemen yang menggulir — html untuk halaman penuh, atau panel itu sendiri bila gulirnya terjadi di dalam panel:

.panel-catatan {
  height: 240px;
  overflow: auto;
  scroll-behavior: smooth;
}

Panel berikut adalah scroll container dengan scroll-behavior: smooth dan overscroll-behavior: contain — gulir di dalamnya, lalu klik tautan navigasinya:

overscroll-behavior: contain #

Coba bayangkan panel chat di ponsel: gulir di dalamnya mencapai ujung, lalu sisa gerakan jari “berantai” menggulir halaman di belakangnya. Perilaku ini disebut scroll chaining, dan default-nya aktif di semua browser. overscroll-behavior: contain memutus rantai itu — gulir berhenti tepat di ujung panelnya:

.panel-modal {
  overflow: auto;
  overscroll-behavior: contain;
}

Nilai none serupa, tetapi sekaligus mematikan efek pantulan gulir bawaan platform.

scrollbar-gutter: stable #

Scrollbar memakan lebar. Ketika konten panel bertambah dan scrollbar tampil mendadak, area konten menyempit sesaat — pergeseran layout yang terlihat sebagai kedipan. Property modern scrollbar-gutter: stable memesan tempat scrollbar sejak awal, terisi atau tidak:

.area-kerja {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Dua panel berdampingan membandingkan kondisi dengan dan tanpa cadangan lajur:

Property ini didukung browser modern; periksa dukungannya bila perlu mendukung Safari versi lama.

Menyatu dengan position: sticky #

Satu catatan penghubung ke section Positioning: position: sticky menempel elemen relatif terhadap nearest scrolling ancestor — dan scroll container itulah leluhur yang dimaksud. Panel dengan overflow: auto otomatis menjadi panggung sticky-nya sendiri. Karena itu, elemen yang ingin menempel selama halaman menggulir tidak boleh terkurung di dalam induk ber-overflow non-visible tanpa disadari; gejala sticky “tidak jalan” hampir selalu berasal dari sini.

Kesalahan Umum #

Ringkasan #

Elemen ber-overflow non-visible menjadi scroll container dengan area pandang sendiri, dan status itu bisa dikonfigurasi: scroll-behavior: smooth menghaluskan lompatan anchor, overscroll-behavior: contain memutus rantai gulir ke halaman, dan scrollbar-gutter: stable mencegah pergeseran lebar. Semua properti ini berinteraksi erat dengan position: sticky yang dibahas di section Positioning. Berikutnya kita kembali ke topik jarak, dengan satu property yang menggantikan trik margin lama dalam satu baris: gap.