Menu tambahan

Jika konten meluas di luar induknya, ada banyak opsi untuk menanganinya. Anda dapat men-scroll untuk menambahkan ruang tambahan, memotong tepi yang meluap, menunjukkan pemangkasan 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>. Properti ini menentukan tampilan teks jika tidak sesuai dengan ruang yang tersedia pada elemen. 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. Hal ini juga dapat terjadi secara tidak sengaja seperti di aplikasi chat, saat pengguna mengetik pesan panjang yang tidak muat dalam balon teks.

Anda dapat menganggap overflow dalam dua bagian. Elemen induk memiliki ruang yang dibatasi dengan ketat yang tidak akan berubah. Anda dapat menganggapnya 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.

Properti overflow-x mengontrol overflow di sepanjang sumbu horizontal area pandang perangkat, sehingga men-scroll ke kiri dan kanan.

Properti logis untuk arah scroll

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

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 akan dipangkas 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 bagus untuk mengurangi pergeseran tata letak di masa mendatang jika penampung dapat di-scroll di masa mendatang berdasarkan, misalnya, perubahan ukuran, dan secara visual mempersiapkan pengguna 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 menghormati preferensi pengguna dan menampilkan scrollbar jika diperlukan, tetapi menyembunyikannya secara default, dan memberikan tanggung jawab untuk men-scroll kepada pengguna dan browser.

Scroll dan overflow

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

Pastikan area yang dapat di-scroll dapat menerima fokus sehingga pengguna keyboard dapat menggunakan tab untuk membuka kotak, 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 scroll root halaman. Namun, dengan mengubah elemen mana yang merupakan scroll root, perilaku khusus dapat diterapkan ke scroll selain documentElement. Kami menyebut scroll baru ini sebagai scroll root implisit.

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

Video ini menampilkan scroll root dengan perilaku pantulan dan fitur gaya baru,
dibandingkan dengan men-scroll scroll implisit tanpa perilaku scroll yang ditingkatkan.

scroll-behavior

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 15.4.

Source

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 jika 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

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

Jika Anda pernah mencapai akhir overlay modal, lalu terus men-scroll dan halaman di belakang overlay bergerak, ini adalah rantai scroll, atau bubble ke penampung 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

Apakah overflow teks dan overflow elemen sama?

false
true

Properti overflow menerima 2 kata kunci, kata kunci pertama untuk sumbu mana?

horizontal
vertikal

Ruang mana dalam model kotak yang digunakan scrollbar saat ditampilkan dan inline?

kotak padding
kotak margin
kotak konten
kotak batas

Untuk menjebak momentum tambahan dari scroll di scroller implisit bertingkat, properti mana yang akan Anda gunakan?

scroll-behavior
scroll-padding
overscroll-effect
overscroll-behavior
scroll-hint

Resource

Overflow And Data Loss In CSS dari Smashing Magazine