Pembahasan kali ini adalah tentang properti overflow yang ada pada CSS, hal yang akan dibahas adalah seperti apa fungsi dan bagaimana cara penggunaan overflow. Berikut akan dibahas lebih lanjut.
Fungsi dari properti overflow pada CSS adalah untuk mengontrol konten yang terlalu besar atau melewati batas yang telah ditentukan untuk dimasukkan ke dalam suatu area.
Contoh :
<!DOCTYPE html> <html> <head> <style> #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 50%; height: 100px; overflow: scroll; border: 1px solid #ccc; } </style> </head> <body> <div id="overflowTest">Teks ini sangat panjang dan tinggi penampungnya hanya 100 piksel. Oleh karena itu, scrollbar ditambahkan untuk membantu pembaca menggulir konten. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 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 augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem</div> </body> </html>
Section Artikel
CSS Overflow
Properti overflow pada CSS akan mengatur apakah konten akan dipotong atau menambahkan scrollbar saat elemen konten terlalu besar untuk muat di area yang telah ditentukan.
Properti overflow pada CSS terdiri dari empat value seperti berikut:
- visible – Default. Overflow tidak terpotong. Konten akan dimuat di luar kotak elemen
- hidden – Overflow terpotong, dan konten lainnya akan disembunyikan
- scroll – Overflow terpotong, dan scrollbar ditambahkan untuk memuat kelebihan konten
- auto – Mirip dengan scroll, tetapi penambahan scrollbar akan dilakukan hanya jika diperlukan
Catatan: Properti overflow hanya berfungsi untuk blok elemen dengan height yang ditentukan.
Catatan: Pada OS X Lion (Mac), scrollbar disembunyikan secara default dan hanya ditampilkan saat digunakan (meskipun “overflow: scroll” telah diatur).
overflow: visible
Secara default, overflow visible, artinya konten tidak dipotong dan akan ditampilkan pada luar kotak elemen.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>Secara default, overflow visible, artinya konten tidak dipotong dan akan ditampilkan pada luar kotak elemen</p>
<div>Properti overflow dapat digunakan jika Anda ingin memiliki kontrol layout yang lebih baik. Properti overflow akan mengatur apa yang terjadi pada konten apabila konten melebihi kotak elemen.</div>
</body>
</html>overflow: hiden
Dengan menggunakan properti overflow hiden, kelebihan pada konten akan dipotong dan kemudian akan disembunyikan.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>Dengan menggunakan properti overflow hiden, kelebihan pada konten akan dipotong dan kemudian disembunyikan.</p>
<p>Coba hapus properti overflow pada source code ini untuk memahami cara kerjanya.</p>
<div>Properti overflow dapat digunakan jika Anda ingin memiliki kontrol layout yang lebih baik. Properti overflow akan mengatur apa yang terjadi pada konten apabila konten melebihi kotak elemen.</div>
</body>
</html>
overflow: scroll
Dengan mengatur penggunaan overflow scroll , konten yang melebihi batas akan dipotong dan scrollbar akan ditambahkan agar pembaca dapat menggulir konten yang ada di dalam kotak. Perhatikan bahwa contoh dibawah ini akan menambahkan scrollbar baik secara horizontal maupun vertikal.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>Dengan mengatur penggunaan overflow scroll , konten yang melebihi batas akan dipotong dan scrollbar akan ditambahkan agar pembaca dapat menggulir konten yang ada di dalam kotak. Perhatikan bahwa contoh dibawah ini akan menambahkan scrollbar baik secara horizontal maupun vertikal.</p>
<div>Properti overflow dapat digunakan jika Anda ingin memiliki kontrol layout yang lebih baik. Properti overflow akan mengatur apa yang terjadi pada konten apabila konten melebihi kotak elemen.</div>
</body>
</html>
Overflow: auto
Properti overflow auto hampir sama dengan overflow scroll, tetapi penambahan scrollbar hanya akan dilakukan jika diperlukan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: auto;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>Properti overflow auto hampir sama dengan overflow scroll, tetapi penambahan scrollbar hanya akan dilakukan jika diperlukan.</p>
<div>Properti overflow dapat digunakan jika Anda ingin memiliki kontrol layout yang lebih baik. Properti overflow akan mengatur apa yang terjadi pada konten apabila konten melebihi kotak elemen.</div>
</body>
</html>overflow-x dan overflow-y
Properti overflow-x dan overflow-y digunakan untuk mengatur apakah konten yang mengalami overflow hanya akan diubah secara horizontal atau vertikal (atau keduanya):
Properti overflow-x mengatur apakah yang harus dilakukan dengan tepi kiri atau kanan konten.
Properti overflow-y mengatur apakah yang harus dilakukan dengan tepi atas atau bawah konten.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>Anda juga dapat mengubah overflow konten secara horizontal atau vertikal.</p>
<p>overflow-x mengatur secara spesifik apakah yang harus dilakukan dengan tepi kiri atau kanan konten..<br>
overflow-x mengatur secara spesifik apakah yang harus dilakukan dengan tepi atas atau bawah konten.</p>
<div>Properti overflow dapat digunakan jika Anda ingin memiliki kontrol layout yang lebih baik. Properti overflow akan mengatur apa yang terjadi pada konten apabila konten melebihi kotak elemen.</div>
</body>
</html>
Seluruh Properti Overflow pada CSS
| Properti | Deskripsi |
| overflow | Mengatur apa yang terjadi jika konten melebihi kotak elemen |
| overflow x | Menentukan apa yang harus dilakukan dengan tepi kiri / kanan konten jika konten melebihi area elemen |
| overflow y | Menentukan apa yang harus dilakukan dengan tepi atas/ bawah konten jika konten melebihi area elemen |
Sekian pembahasan dan contoh cara penggunan properti overflow pada CSS, semoga bermanfaat.
