Menu tambahan

The CSS Podcast - 034: Overflow

Jika konten meluas di luar induknya, ada banyak opsi untuk menanganinya. Anda dapat men-scroll untuk menambahkan ruang tambahan, memotong tepi yang meluap, menunjukkan bagian yang terpotong dengan elipsis, dan banyak lagi. Overflow sangat penting untuk dipertimbangkan saat mengembangkan aplikasi ponsel dan beberapa ukuran layar.

Ada dua opsi pemangkasan yang berbeda di CSS; text-overflow akan membantu setiap baris teks, dan properti overflow akan membantu mengontrol overflow dalam model kotak.

Tambahan baris tunggal dengan text-overflow

Gunakan properti text-overflow pada elemen apa pun yang berisi node teks, misalnya paragraf, <p>. Fungsi ini menentukan bagaimana teks muncul jika tidak sesuai dengan ruang elemen yang tersedia. Semua teks HTML yang dapat dilihat di halaman berada dalam node teks. Untuk menggunakan text-overflow, Anda memerlukan satu baris teks yang tidak digabungkan, sehingga Anda juga harus menetapkan overflow ke hidden dan memiliki nilai white-space yang mencegah penggabungan.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Menggunakan properti overflow

Properti overflow ditetapkan pada elemen untuk mengontrol hal yang terjadi saat turunannya memerlukan lebih banyak ruang daripada yang tersedia. Hal ini dapat dilakukan secara sengaja, seperti pada peta interaktif seperti Google Maps, tempat pengguna menggeser gambar besar yang dipangkas ke ukuran tertentu. Cara ini juga mungkin tidak disengaja seperti dalam aplikasi chat ketika pengguna mengetik pesan panjang yang tidak muat dalam balon teks.

Anda dapat menganggap overflow dalam dua bagian. Elemen induk memiliki ruang yang dibatasi dengan kuat dan tidak akan berubah. Anda dapat menganggap ini sebagai jendela. Elemen turunan adalah konten yang menginginkan lebih banyak ruang dari induknya. Anda dapat menganggapnya sebagai hal yang Anda lihat melalui jendela. Mengelola kelebihan akan membantu memandu cara jendela membingkai konten ini.

Men-scroll pada sumbu vertikal dan horizontal

Properti overflow-y mengontrol overflow fisik di sepanjang sumbu vertikal area pandang perangkat, sehingga men-scroll ke atas dan ke bawah.

Kontrol properti overflow-x berada di sepanjang sumbu horizontal area tampilan perangkat sehingga dapat men-scroll ke kiri dan ke kanan.

Properti logis untuk arah scroll

Properti overflow-inline dan overflow-block menetapkan overflow berdasarkan arah dokumen dan mode penulisan.

Singkatan overflow

Singkatan overflow menetapkan gaya overflow-x dan overflow-y dalam satu baris:

overflow: hidden scroll;

Jika dua kata kunci ditentukan, kata kunci pertama akan diterapkan ke overflow-x dan kata kunci kedua ke overflow-y. Jika tidak, overflow-x dan overflow-y akan menggunakan nilai yang sama.

Nilai

Mari kita pelajari lebih lanjut nilai dan kata kunci yang tersedia untuk properti overflow.

overflow: visible (default)

Tanpa menetapkan properti, overflow: visible adalah nilai default untuk web. Hal ini memastikan bahwa konten tidak pernah disembunyikan secara tidak sengaja dan mengikuti prinsip inti "jangan pernah sembunyikan konten" atau "tata letak aman dari tata letak yang presisi".

overflow: hidden

Dengan overflow: hidden konten dipotong ke arah yang ditentukan, dan tidak ada scrollbar yang disediakan untuk menampilkannya.

overflow: scroll

overflow: scroll mengaktifkan scrollbar untuk memungkinkan pengguna men-scroll konten. Meskipun konten saat ini tidak meluap, scrollbar akan ada. Ini adalah cara yang efektif untuk mengurangi pergeseran tata letak di masa mendatang jika penampung mungkin dapat di-scroll pada masa mendatang berdasarkan, misalnya, saat mengubah ukuran, dan mempersiapkan pengguna secara visual untuk area yang dapat di-scroll.

overflow: clip

Seperti overflow: hidden, konten dengan overflow: clip terpotong ke kotak padding elemen. Perbedaan antara clip dan hidden adalah kata kunci clip juga melarang semua scroll, termasuk scroll terprogram.

overflow: auto

Terakhir, nilai yang paling umum digunakan, overflow: auto. Hal ini mengikuti preferensi pengguna dan menampilkan scrollbar jika diperlukan, tetapi menyembunyikannya secara default, dan memberikan tanggung jawab untuk men-scroll ke pengguna dan browser.

Scroll dan tambahan

Banyak perilaku overflow ini yang memperkenalkan scrollbar, tetapi ada beberapa perilaku dan properti scroll tertentu yang dapat membantu Anda mengontrol scroll pada penampung overflow.

Scroll dan aksesibilitas

Penting untuk memastikan bahwa area yang dapat di-scroll dapat menerima fokus sehingga pengguna keyboard dapat menekan tombol tab ke kotak tersebut, lalu menggunakan tombol panah untuk men-scroll.

Untuk mengizinkan kotak scroll menerima fokus, tambahkan tabindex="0", nama dengan atribut aria-labelledby, dan atribut role yang sesuai. Contoh:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

CSS kemudian dapat digunakan untuk menunjukkan bahwa kotak memiliki fokus, menggunakan properti outline untuk memberikan petunjuk visual bahwa kotak tersebut sekarang dapat di-scroll.

Dalam Menggunakan CSS untuk Menerapkan Aksesibilitas, Adrian Roselli menunjukkan cara CSS dapat membantu mencegah regresi aksesibilitas. Misalnya, untuk hanya mengaktifkan scroll dan menambahkan indikator fokus jika atribut yang benar digunakan. Aturan berikut hanya akan membuat kotak dapat di-scroll jika memiliki atribut tabindex, aria-labelledby, dan role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Pemosisian scrollbar dalam model kotak

Scroll bar menggunakan ruang dalam kotak padding dan dapat bersaing untuk mendapatkan ruang jika inline dan bukan overlaid. Modul model kotak menjelaskan lebih lanjut potensi sumber pergeseran tata letak ini.

root-scroller vs implicit-scroller

Anda mungkin melihat bahwa beberapa penggeser memiliki perilaku tarik untuk memuat ulang dan perilaku khusus lainnya, terutama saat mengembangkan untuk aplikasi seluler dan campuran. Perilaku scroll ini terjadi di penggeser root. Hanya ada satu penggeser root di halaman. Secara default, documentElement adalah scroller root halaman. Namun, dengan mengubah elemen mana yang merupakan scroller root, perilaku khusus dapat diterapkan ke scroller selain documentElement, kami menyebut scroller baru ini sebagai scroller root implisit.

Untuk membuat scroll root, Anda dapat menggunakan sesuatu yang disebut promosi scroll dengan memosisikan penampung sebagai tetap, memastikan penampung tersebut mencakup seluruh area pandang dan memiliki z-index di atas dengan scroll. Rasakan scroll root vs scroll implisit bertingkat di sini.

scroll-behavior

scroll-behavior memungkinkan Anda memilih untuk menggunakan scroll yang dikontrol browser ke elemen. Hal ini memungkinkan Anda menentukan cara penanganan navigasi dalam halaman seperti .scrollTo() atau link.

Hal ini sangat berguna saat digunakan dengan prefers-reduced-motion untuk menentukan perilaku scroll berdasarkan preferensi pengguna.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Jika Anda pernah mencapai akhir overlay modal, lalu terus men-scroll dan membuat halaman di belakang overlay dipindahkan, ini adalah rantai scroll, atau bergelembung ke container scroll induk. Properti overscroll-behavior memungkinkan Anda mencegah scroll overflow bocor ke penampung induk (disebut rantai scroll).

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang overflow

Resource

Overflow And Data Loss In CSS dari Smashing Magazine