Overflow

Pengendalian luapan konten dengan hidden, scroll, dan auto, termasuk penataan gaya scrollbar.

Daftar isi

Topik ini menjelaskan properti overflow, properti yang mengatur perilaku konten ketika isinya melebihi ukuran kotaknya. Pembahasan mencakup empat nilai utamanya, relasi dengan block formatting context, kasus pemakaiannya pada panel log dan kartu dengan sudut membulat, serta pengenalan penataan gaya scrollbar. Demo di bagian tengah memperlihatkan keempat nilai tersebut pada konten yang sama persis.

Nilai overflow dan perilakunya#

Properti overflow menentukan apa yang terjadi ketika konten tidak muat di dalam kotaknya. Nilai visible adalah nilai bawanya: konten digambar apa adanya hingga meluber ke luar kotak tanpa terpotong. Nilai hidden memotong konten pada tepi kotak dan menyembunyikan sisanya tanpa menyediakan cara untuk melihatnya. Nilai scroll menyediakan mekanisme gulir dengan scrollbar yang digambar terus-menerus, meskipun kontennya sebenarnya muat. Nilai auto menyediakan gulir hanya apabila konten benar-benar meluber.

Arah horizontal dan vertikal dapat diatur terpisah melalui overflow-x dan overflow-y, sedangkan penulisan overflow saja menyatakan kedua arah sekaligus. Kombinasi semacam overflow-x: auto dengan overflow-y: hidden lazim digunakan untuk tabel lebar yang hanya perlu menggulir ke samping. Tabel berikut merangkum keempat nilai:

Nilai	Konten meluber	Dapat digulir	Scrollbar
`visible`	Ya, terlihat	Tidak	Tidak ada
`hidden`	Tidak, terpotong	Tidak	Tidak ada
`scroll`	Tidak, terpotong	Ya	Selalu digambar
`auto`	Tidak, terpotong	Ya	Hanya bila perlu

Relasi dengan block formatting context#

Setiap elemen dengan overflow selain visible membentuk block formatting context (block formatting context) baru, yaitu lingkup perhitungan layout yang isinya dihitung terpisah dari lingkungan luarnya. Akibat yang paling terasa adalah pengurungan apungan (float): elemen anak yang melayang tidak lagi keluar dari batas induknya, karena tinggi induk kini menghitung seluruh isinya termasuk apungannya.

Sifat ini menjadikan overflow: hidden salah satu cara klasik untuk menahan apungan, sebelum teknik yang lebih eksplisit seperti display: flow-root tersedia. Di sisi lain, pembentukan konteks baru juga memutus penggabungan margin antara induk dan anak pertamanya, sehingga jarak vertikal dapat berubah hanya karena nilai overflow ditambahkan. Perubahan semacam ini terasa tidak terduga bila penyebabnya tidak diketahui, sehingga relasi ini perlu diingat setiap kali overflow diterapkan pada elemen yang sudah jadi. Spesifikasi CSS Overflow menetapkan perilaku tersebut, dan dokumentasi MDN merangkumnya pada modul overflow yang dirujuk di bagian Referensi.

Kasus panel log dan kartu bersudut membulat#

Dua kasus berikut muncul hampir di setiap proyek. Kasus pertama adalah panel catatan sensor suhu (log) yang tingginya tetap, sedangkan isinya terus bertambah. Panel diberi ketinggian tetap dan overflow-y: auto, sehingga halaman tidak ikut memanjang dan baris-baris lamanya tetap terjangkau dengan menggulir. Ketinggian tetap seperti ini biasanya dipasangkan dengan lebar penuh, sehingga panel berperilaku seperti jendela kecil di dalam halaman:

css Contoh: panel log dengan tinggi tetap

.panel-log {
  height: 180px;
  overflow-y: auto;
}

Kasus kedua adalah kartu dengan border-radius yang memuat gambar lebar penuh pada bagian atasnya. Tanpa pengaturan tambahan, sudut gambar menonjol keluar dari sudut kartu yang membulat. Memberi overflow: hidden pada kartu memotong gambar tepat mengikuti sudut tersebut:

css Contoh: kartu memotong gambar mengikuti sudutnya

.kartu {
  border-radius: 12px;
  overflow: hidden;
}

Kedua contoh hanya menyentuh satu kotak tanpa elemen tambahan. Pola ini umum digunakan karena murah dan mudah dibaca, dengan catatan konten yang terpotong benar-benar tidak dibutuhkan. Pola yang sama juga digunakan untuk video dan peta yang ditempel pada kartu bersudut membulat. Demo berikut merangkum keempat nilai overflow pada konten yang sama sehingga perbedaannya dapat dibandingkan secara langsung.

Demo empat nilai overflow#

Demo berikut menampilkan empat panel berisi baris catatan sensor yang sama persis, masing-masing dengan nilai visible, hidden, scroll, dan auto. Panel visible meluber ke luarnya, panel hidden terpotong tanpa sisa, panel scroll memperlihatkan scrollbar yang selalu ada, dan panel auto memperlihatkan scrollbar yang muncul karena isinya memang meluber. Di bawahnya, panel log digulir dengan scrollbar tipis yang diberi warna melalui properti standar. Jalankan demo, gulir panel yang dapat digulir, lalu bandingkan keempat perilakunya. Keempat panel sengaja diberi ukuran dan isi yang identik agar satu-satunya variabel adalah nilai overflow-nya:

Kode sumber demo

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo nilai properti overflow</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main>
    <h1>Demo nilai overflow</h1>

    <div class="baris">
      <section class="sel">
        <h2>visible</h2>
        <div class="panel vis-visible">
          <p>07:00 Sensor 01: 24,5 derajat</p>
          <p>07:10 Sensor 01: 24,7 derajat</p>
          <p>07:20 Sensor 01: 25,1 derajat</p>
          <p>07:30 Sensor 01: 25,4 derajat</p>
          <p>07:40 Sensor 01: 25,9 derajat</p>
        </div>
      </section>

      <section class="sel">
        <h2>hidden</h2>
        <div class="panel vis-hidden">
          <p>07:00 Sensor 01: 24,5 derajat</p>
          <p>07:10 Sensor 01: 24,7 derajat</p>
          <p>07:20 Sensor 01: 25,1 derajat</p>
          <p>07:30 Sensor 01: 25,4 derajat</p>
          <p>07:40 Sensor 01: 25,9 derajat</p>
        </div>
      </section>

      <section class="sel">
        <h2>scroll</h2>
        <div class="panel vis-scroll">
          <p>07:00 Sensor 01: 24,5 derajat</p>
          <p>07:10 Sensor 01: 24,7 derajat</p>
          <p>07:20 Sensor 01: 25,1 derajat</p>
          <p>07:30 Sensor 01: 25,4 derajat</p>
          <p>07:40 Sensor 01: 25,9 derajat</p>
        </div>
      </section>

      <section class="sel">
        <h2>auto</h2>
        <div class="panel vis-auto">
          <p>07:00 Sensor 01: 24,5 derajat</p>
          <p>07:10 Sensor 01: 24,7 derajat</p>
          <p>07:20 Sensor 01: 25,1 derajat</p>
          <p>07:30 Sensor 01: 25,4 derajat</p>
          <p>07:40 Sensor 01: 25,9 derajat</p>
        </div>
      </section>
    </div>

    <h2 class="judul-log">Panel log dengan scrollbar bergaya</h2>
    <div class="panel log">
      <p>08:00 Sensor 01: 26,2 derajat</p>
      <p>08:10 Sensor 01: 26,0 derajat</p>
      <p>08:20 Sensor 01: 25,8 derajat</p>
      <p>08:30 Sensor 01: 25,5 derajat</p>
      <p>08:40 Sensor 01: 25,3 derajat</p>
      <p>08:50 Sensor 01: 25,0 derajat</p>
      <p>09:00 Sensor 01: 24,8 derajat</p>
      <p>09:10 Sensor 01: 24,6 derajat</p>
      <p>09:20 Sensor 01: 24,5 derajat</p>
      <p>09:30 Sensor 01: 24,4 derajat</p>
    </div>
  </main>

<style>
/* Gaya demo nilai properti overflow */
body {
  font-family: sans-serif;
  background-color: #eef2f7;
  color: #1f2937;
  margin: 0;
  padding: 16px;
}

h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 13px; margin: 0 0 6px; font-weight: 700; }

.baris {
  margin-bottom: 16px;
}

/* Panel disusun berjajar memakai inline-block */
.sel {
  display: inline-block;
  vertical-align: top;
  width: 124px;
  margin-right: 10px;
}

.panel {
  height: 110px;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
}

.panel p {
  margin: 0 0 6px;
  line-height: 1.4;
}

.vis-visible { overflow: visible; }
.vis-hidden  { overflow: hidden; }
.vis-scroll  { overflow: scroll; }
.vis-auto    { overflow: auto; }

.judul-log {
  font-size: 15px;
  margin: 0 0 6px;
  font-weight: 700;
}

/* Panel log: menggulir dengan scrollbar tipis berwarna */
.log {
  height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #e2e8f0;
}

</style>
<style>
/* Gaya demo nilai properti overflow */
body {
  font-family: sans-serif;
  background-color: #eef2f7;
  color: #1f2937;
  margin: 0;
  padding: 16px;
}

h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 13px; margin: 0 0 6px; font-weight: 700; }

.baris {
  margin-bottom: 16px;
}

/* Panel disusun berjajar memakai inline-block */
.sel {
  display: inline-block;
  vertical-align: top;
  width: 124px;
  margin-right: 10px;
}

.panel {
  height: 110px;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
}

.panel p {
  margin: 0 0 6px;
  line-height: 1.4;
}

.vis-visible { overflow: visible; }
.vis-hidden  { overflow: hidden; }
.vis-scroll  { overflow: scroll; }
.vis-auto    { overflow: auto; }

.judul-log {
  font-size: 15px;
  margin: 0 0 6px;
  font-weight: 700;
}

/* Panel log: menggulir dengan scrollbar tipis berwarna */
.log {
  height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #e2e8f0;
}

</style></body>
</html>

Perhatikan bahwa panel scroll tetap menggambar scrollbar meskipun gulirannya tidak diperlukan, sedangkan panel auto tidak. Perbedaan kecil ini menentukan kenyamanan tampilan, dan auto hampir selalu menjadi pilihan yang lebih aman. Seluruh perbedaan antar panel berasal dari satu deklarasi pada berkas index.css, sehingga nilai lain dapat diuji dengan menyunting satu baris saja. Apabila jendela demo dipersempit, panel visible tetap meluber tanpa berubah, sedangkan panel lain menyesuaikan batas potongannya.

Penataan gaya scrollbar#

Scrollbar dapat ditata gaya tanpa mengubah perilakunya. Dua properti standar yang tersedia adalah scrollbar-width dengan nilai auto, thin, atau none, serta scrollbar-color yang menerima dua warna, yaitu warna pegangan dan warna lintasannya. Kedua properti ditetapkan pada elemen yang menggulir, dan nilai none menyembunyikan scrollbar sepenuhnya tanpa mematikan gulirannya sendiri.

Selain properti standar, terdapat pseudo-element ::-webkit-scrollbar beserta turunannya yang bekerja pada browser berbasis WebKit dan Chromium. Pendekatan ini lebih fleksibel karena dapat mengubah bentuk dan latar scrollbar, tetapi tidak didukung Firefox dan bukan bagian dari standar CSS. Untuk kebutuhan umum seperti menipiskan scrollbar panel log, properti standar sudah cukup dan lebih mudah dipelihara:

css Contoh: scrollbar tipis berwarna abu-abu

.panel-log {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #e2e8f0;
}

Dukungan kedua properti standar ini telah tersedia pada browser utama, meskipun waktunya berbeda-beda, sedangkan ::-webkit-scrollbar tetap berguna untuk penyesuaian mendalam pada browser Chromium. Apabila gaya scrollbar gagal diterapkan, periksa dahulu apakah elemennya benar-benar menggulir, karena scrollbar yang tidak digambar juga tidak bergaya.

Kesalahan umum#

Kesalahan pertama adalah menerapkan overflow: hidden untuk menyembunyikan konten yang ternyata masih dibutuhkan. Menu tarik-turun, ring fokus keyboard, dan bagian akhir teks dapat terpotong tanpa satu sinyal pun, karena hidden tidak menyediakan cara untuk mengakses sisanya. Perbaikannya, gunakan auto bila konten seharusnya tetap terjangkau, atau perkecil isi hingga benar-benar muat. Celah semacam ini sering baru ketahuan setelah halaman diuji dengan keyboard, karena ring fokus justru paling mudah terpotong.

Kesalahan kedua adalah memilih scroll padahal auto cukup. Scrollbar permanen mengambil lebar dan menampilkan gulungan yang tidak berfungsi, sehingga tampilan terlihat tidak rapi terutama pada panel kecil. Perbaikannya, gunakan auto dan biarkan browser menggambar scrollbar hanya saat diperlukan.

Kesalahan ketiga adalah mengandalkan overflow untuk menangani teks yang terlalu panjang. Pemotongan pada tepi kotak memotong di tengah kata tanpa tanda apa pun. Perbaikannya, gunakan penataan teks seperti text-overflow yang memang dirancang untuk kasus tersebut. Teks yang terpotong di tengah kata juga sulit disalin dan diterjemahkan dengan utuh.

Ringkasan#

overflow: visible adalah nilai bawaan yang meluber, sedangkan hidden memotong tanpa gulir, scroll menggulir dengan scrollbar permanen, dan auto menggulir hanya bila perlu.
Arah horizontal dan vertikal diatur terpisah dengan overflow-x dan overflow-y, dan satu arah yang tidak visible menjadikan arah lainnya auto.
Elemen dengan overflow selain visible membentuk block formatting context baru, sehingga apungan terkurung dan penggabungan margin tidak menembus batasnya.
scrollbar-width dan scrollbar-color menata gaya scrollbar melalui properti standar, sedangkan ::-webkit-scrollbar melayani penyesuaian pada browser Chromium.

Referensi#

overflow — MDN — Rujukan resmi properti overflow beserta seluruh nilainya.
CSS Overflow Module Level 3 — CSS Working Group — Spesifikasi modul overflow, termasuk aturan perhitungan antar arah.
scrollbar-width — MDN — Rujukan resmi properti ketebalan scrollbar.
scrollbar-color — MDN — Rujukan resmi properti warna scrollbar.
Learn CSS — web.dev — Kursus resmi tim Google Chrome yang membahas rendering dan layout.