overflow | Codingku

Properti overflow menentukan cara menampilkan atau tidak menampilkan konten yang melampaui batas elemen.

Elemen yang isinya mungkin meluap adalah elemen tingkat blok.

Dengan menggunakan properti overflow, kamu dapat menentukan apakah akan menampilkan konten overflow (mungkin tumpang tindih dengan elemen lain), atau membuat scroll bar pada elemen sehingga konten di dalam elemen akan bergulir.

Nilai default properti ini adalah visible, yang berarti bahwa konten yang meluap biasanya terlihat.

Properti overflow dapat mengambil tiga nilai lebih: hidden, scroll, dan auto.

Satu-satunya kasus ketika konten mungkin meluap wadahnya adalah ketika wadah memiliki tinggi atau lebar yang ditetapkan secara eksplisit.

Tanpa ketinggian yang eksplisit, elemen hanya akan meluas agar sesuai dengan konten di dalamnya.

Hal yang sama berlaku untuk konten horizontal. Elemen biasanya akan berkembang secara horizontal agar sesuai dengan kontennya.

Jika elemen memiliki set lebar eksplisit, maka jika elemen itu mengandung konten yang memiliki lebar lebih besar dari lebar elemen.

CSS Syntax

overflow: visible | hidden | scroll | auto | initial | inherit;

JavaScript Syntax

object.style.overflow="scroll"

Default value:	visible
Inherited:	tidak
Animatable:	tidak Read about animatable
Version:	CSS2

Attribute Value

default overflow: visible;

Konten yang meluap terlihat, sedangkan elemen itu sendiri tetap pada ketinggian yang ditentukan.

overflow: hidden;

Konten yang meluap disembunyikan dan tidak dapat diakses.

overflow: scroll;

Konten yang meluap dapat diakses berkat bilah gulir vertikal.

overflow: auto;

Browser memutuskan apakah akan menampilkan scrollbar vertikal atau tidak.