overflow: hidden scroll auto clip
Kendalikan penanganan konten yang meluap dengan nilai hidden, scroll, auto, dan clip.
overflow: hidden scroll auto clip adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Ringkasan Properti overflow
overflow mengatur apa yang terjadi saat konten elemen melebihi dimensinya yang ditetapkan. Properti ini berlaku pada kedua sumbu sekaligus (atau gunakan overflow-x/overflow-y untuk kontrol per sumbu).
overflow: visible
visible (default) — konten ditampilkan di luar kotak. Nilai ini tidak membuat Konteks Pemformatan Blok (BFC). Elemen lain dapat menutupi konten yang meluap.
overflow: hidden
hidden memotong konten pada batas kotak. Nilai ini membuat BFC, yang menampung elemen mengambang dan mencegah kolaps margin. Ini adalah nilai yang paling umum untuk wadah gambar dengan sudut membulat.
<div class="rounded-card"></div>overflow: scroll
scroll selalu menampilkan bilah gulir (pada sumbu yang mendukungnya), terlepas dari apakah konten meluap. Nilai ini berguna untuk antarmuka yang konsisten saat ruang bilah gulir harus selalu tersedia agar pergeseran tata letak dapat dicegah.
<div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>overflow: auto
auto hanya menampilkan bilah gulir saat konten benar-benar meluap. Nilai ini lebih disarankan daripada scroll untuk sebagian besar wadah yang dapat digulir karena menghindari tampilan bilah gulir yang tidak diperlukan.
<div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>overflow: clip
clip memotong konten seperti hidden, tetapi TIDAK membuat BFC. Artinya, nilai ini tidak memengaruhi penampungan elemen mengambang atau kolaps margin. Gunakan nilai ini saat Anda menginginkan pemotongan tanpa efek samping BFC.
<div class="decorative-overflow"><div class="deco"></div></div>overflow-x dan overflow-y
Kontrol setiap sumbu secara terpisah. Pola yang sangat umum adalah pengguliran horizontal untuk konten yang lebar (tabel, kode), sementara luapan vertikal tetap terlihat:
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>Overflow dan BFC
Menetapkan overflow ke nilai apa pun selain visible dan clip akan membuat Konteks Pemformatan Blok. Ini menampung elemen mengambang internal, mencegah kolaps margin menyebar, dan membuat konteks pengguliran baru.
overflow: overlay (Nonstandar)
overflow: overlay menggambar bilah gulir di atas konten, bukan menggunakan ruang tata letak. Nilai ini merupakan nilai nonstandar di beberapa browser dan sedang dihentikan penggunaannya demi penataan bilah gulir modern.
scrollbar-gutter
Properti baru scrollbar-gutter: stable menyediakan ruang untuk bilah gulir meskipun belum diperlukan, sehingga mencegah pergeseran tata letak saat konten mulai dapat digulir.
<div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>Overflow dan Elemen Anak Tetap
Bug yang umum terjadi: elemen anak dengan position: fixed di dalam elemen dengan overflow: hidden akan berperilaku seperti position: absolute — posisi tetap relatif terhadap blok pembungkus, dan overflow membuat konteks penumpukan baru.
Pemeriksaan Singkat
Nilai overflow mana yang memotong konten tanpa membuat Konteks Pemformatan Blok?
Ringkasan
visible (default) mengizinkan luapan. hidden memotong konten dan membuat BFC. scroll selalu menampilkan bilah gulir. auto hanya menampilkan bilah gulir saat diperlukan (lebih disarankan). clip memotong konten tanpa BFC. Gunakan overflow-x/y untuk kontrol per sumbu. Gunakan scrollbar-gutter: stable untuk mencegah pergeseran tata letak.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “overflow: hidden scroll auto clip” gratis?
Ya — teks lengkap “overflow: hidden scroll auto clip” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “overflow: hidden scroll auto clip”?
Kendalikan penanganan konten yang meluap dengan nilai hidden, scroll, auto, dan clip. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “overflow: hidden scroll auto clip” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type dan scroll-snap-align
- Penataan Bilah Gulir dengan ::-webkit-scrollbar