CSS Academy · Pelajaran

Overflow: Scroll, Clip, dan Auto

Kontrol perilaku saat konten melebihi wadahnya menggunakan properti overflow.

Overflow: Scroll, Clip, dan Auto adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Apa Itu Overflow?

Luapan terjadi ketika konten elemen lebih besar daripada dimensinya yang ditentukan. Properti overflow mengatur apa yang terjadi pada konten berlebih ini.

overflow: visible (Bawaan)

Secara bawaan, konten meluap dan terlihat di luar kotak elemen. Hal ini dapat menyebabkan konten menimpa elemen saudara atau keluar dari area pandang.

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

overflow: hidden memangkas konten apa pun yang melampaui batas elemen. Konten yang dipangkas tidak dapat diakses atau digulir.

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

overflow: scroll selalu menampilkan bilah gulir—bahkan saat konten masih muat. Gunakan ini jika Anda menginginkan antarmuka pengguna yang konsisten, terlepas dari ukuran konten.

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

overflow: auto hanya menampilkan bilah gulir ketika konten benar-benar meluap. Biasanya cara ini lebih disukai daripada scroll agar tidak menampilkan ruang bilah gulir yang tidak diperlukan.

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

overflow: clip mirip dengan hidden, tetapi lebih agresif: properti ini tidak membuat konteks pemformatan blok dan tidak dapat digulir dengan JavaScript. Ideal untuk pemangkasan yang aman bagi performa.

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x dan overflow-y

Kontrol setiap sumbu secara terpisah. Pola umum memungkinkan pengguliran horizontal untuk konten lebar seperti kode atau tabel:

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

Pola Kontainer yang Dapat Digulir

Untuk membuat kontainer yang dapat digulir, Anda memerlukan tinggi tetap dan overflow: auto atau scroll:

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

Konteks Pemformatan Blok dari Luapan

Menetapkan overflow ke nilai apa pun selain visible akan membuat konteks pemformatan blok (BFC). Ini menampung float internal dan mencegah keruntuhan margin keluar dari kontainer.

Rantai Pengguliran

Ketika kontainer yang dapat digulir digulir hingga batasnya, peristiwa pengguliran dapat "diteruskan" ke elemen induk. Gunakan overscroll-behavior: contain untuk mencegahnya.

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow dibandingkan dengan overflow

text-overflow: ellipsis berkaitan dengan teks di dalam elemen dan memerlukan overflow: hidden + white-space: nowrap agar berfungsi. overflow mengontrol perilaku luapan elemen itu sendiri.

Pemeriksaan Singkat

Nilai overflow mana yang menampilkan bilah gulir hanya ketika konten benar-benar meluap?

Ringkasan

overflow: hidden memotong konten. overflow: auto menambahkan bilah gulir hanya saat diperlukan (disarankan). overflow: scroll selalu menampilkan bilah gulir. overflow: clip memotong konten tanpa membuat konteks pemformatan baru. Gunakan overflow-x/y untuk mengontrol setiap sumbu.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Overflow: Scroll, Clip, dan Auto” gratis?

Ya — teks lengkap “Overflow: Scroll, Clip, dan Auto” 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: Scroll, Clip, dan Auto”?

Kontrol perilaku saat konten melebihi wadahnya menggunakan properti overflow. 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 3 dari 4.

Berapa lama pelajaran “Overflow: Scroll, Clip, dan Auto” 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

← Kembali ke CSS Academy