Overflow CSS

Properti overflow CSS mengontrol apa yang terjadi pada konten yang terlalu besar untuk dimasukkan ke dalam suatu area.

Teks ini sangat panjang dan tinggi wadahnya hanya 100 piksel. Oleh karena itu, scrollbar ditambahkan untuk membantu pembaca menggulir konten. Lorem ipsum dolor sit amet, conectetuer adipiscing elite, sed silence nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam tight volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit nulla. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non haben claritatem insitam; est usus legentis di iis qui facit eorum claritatem.

Overflow CSS

Properti overflow menspesifikasikan apakah memotong konten atau menambahkan scrollbar ketika isi dari suatu elemen terlalu besar untuk muat di area yang ditentukan.

Properti overflow memiliki nilai berikut:

• visible - Default. Overflow tidak terpotong. Konten dirender/ditampilkan di luar kotak elemen
• hidden - Overflow terpotong, dan konten lainnya tidak akan terlihat
• scroll - Overflow terpotong, dan scroll ditambahkan untuk melihat konten lainnya
• auto - Mirip dengan scroll, tetapi menambahkan scroll hanya jika diperlukan

Catatan: Properti overflow hanya bekerja untuk elemen blok dengan ketinggian tertentu.

Catatan: Di OS X Lion (di Mac), scroll disembunyikan secara default dan hanya ditampilkan saat digunakan (meskipun "overflow:scroll" telah diset).

overflow: visible

Secara default, overflow adalah visible, artinya tidak terpotong dan ditampilkan di luar kotak elemen:

Anda dapat menggunakan properti overflow ketika Anda ingin memiliki

Contoh

div {
  width: 300px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

overflow: hidden

Dengan nilai hidden, overflow akan terpotong, dan konten lainnya disembunyikan:

Anda dapat menggunakan properti overflow ketika Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.

Contoh

div {
  overflow: hidden;
}

overflow: scroll

Menset nilai ke scroll, overflow akan terpotong dan scrollbar ditambahkan untuk menggulir di dalam kotak. Perhatikan bahwa ini akan menambahkan scrollbar baik secara horizontal maupun vertikal (bahkan jika Anda tidak membutuhkannya):

Anda dapat menggunakan properti overflow ketika Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.

Contoh

div {
  overflow: scroll;
}

overflow: auto

Nilai auto mirip dengan nilai scroll, tetapi menambahkan scrollbar hanya bila diperlukan:

Anda dapat menggunakan properti overflow ketika Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.

Contoh

div {
  overflow: auto;
}

overflow-x dan overflow-y

Properti overflow-x dan overflow-y menentukan apakah akan mengubah overflow konten hanya secara horizontal atau vertikal (atau keduanya):

overflow-x menentukan apa yang harus dilakukan dengan tepi kiri/kanan konten.

overflow-y menentukan apa yang harus dilakukan dengan tepi atas/bawah konten.

Anda dapat menggunakan properti overflow ketika Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.

Contoh

div {
  overflow-x: hidden; /* Menyembunyikan scrollbar horizontal */
  overflow-y: scroll; /* Menambahkan scrollbar vertical */
}

Sumber referensi: w3schools