Menu tambahan

The CSS Podcast - 034: Overflow

Saat konten melampaui induknya, ada banyak opsi untuk cara Anda menanganinya. Anda dapat men-scroll untuk menambahkan ruang tambahan, memotong tepi yang meluap, menunjukkan batas dengan elipsis, dan banyak lagi. Overflow sangat penting untuk dipertimbangkan saat mengembangkan aplikasi ponsel dan berbagai ukuran layar.

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

Overflow satu baris dengan text-overflow

Gunakan properti text-overflow pada elemen apa pun yang berisi node teks, misalnya paragraf, <p>. Menentukan bagaimana teks muncul saat tidak sesuai dengan ruang yang tersedia pada elemen. Semua teks HTML yang dapat dilihat di halaman berada di node teks. Untuk menggunakan text-overflow, Anda memerlukan satu baris teks yang tidak di-wrap, jadi Anda juga harus menyetel overflow ke hidden dan memiliki nilai white-space yang mencegah wrapping.

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

Menggunakan properti overflow

Properti overflow ditetapkan pada elemen untuk mengontrol apa yang terjadi saat elemen 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 pada aplikasi chat saat pengguna mengetik pesan panjang yang tidak muat di balon teks.

Anda dapat menganggap bagian yang meluap dalam dua bagian. Elemen induk memiliki ruang yang dibatasi dengan kuat dan tidak akan berubah. Anda dapat menganggapnya sebagai jendela. Elemen turunan adalah konten yang menginginkan lebih banyak ruang dari induknya. Anda dapat menganggapnya sebagai apa yang Anda lihat melalui jendela. Mengelola konten yang berlebih 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 tampilan perangkat, sehingga men-scroll ke atas dan ke bawah.

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

Properti logis untuk arah scroll

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

Nama pendek overflow

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

overflow: hidden scroll;

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

Nilai

Pelajari lebih lanjut nilai dan kata kunci yang tersedia untuk properti overflow.

overflow: visible (default)

Tanpa menyetel 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 menyembunyikan konten" atau "tata letak aman dari tata letak presisi".

overflow: hidden

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

overflow: scroll

overflow: scroll memungkinkan scrollbar agar pengguna dapat men-scroll konten. Meskipun konten 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, pengubahan ukuran, dan mempersiapkan pengguna secara visual untuk area yang dapat di-scroll.

overflow: clip

Seperti overflow: hidden, konten dengan overflow: clip dipangkas ke kotak padding elemen. Perbedaan antara clip dan hidden adalah kata kunci clip juga melarang semua pen-scroll-an, termasuk pen-scroll-an 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, serta memberikan tanggung jawab untuk men-scroll kepada pengguna dan browser.

Scrolling dan luapan

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

Men-scroll dan aksesibilitas

Penting untuk memastikan bahwa area yang dapat di-scroll dapat menerima fokus sehingga pengguna keyboard dapat menekan tombol tab ke 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 kini dapat di-scroll.

Dalam Using CSS to Enforce Accessibility, Adrian Roselli menunjukkan cara CSS dapat membantu mencegah regresi aksesibilitas. Misalnya, hanya mengaktifkan scrolling 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

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

root-scroller versus implicit-scroller

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

Untuk membuat scroller root, Anda dapat menggunakan sesuatu yang disebut promosi scroller dengan memosisikan penampung sebagai tetap, memastikan penampung tersebut mencakup seluruh area tampilan dan memiliki z-index di atas dengan scroller. Lihat perbandingan antara scroller root dan scroller implisit bertingkat di sini.

Menata gaya scrollbar

Anda dapat menyesuaikan gaya scrollbar untuk memasukkannya ke dalam desain situs Anda. scrollbar-color menetapkan warna untuk thumb dan gutter scrollbar.

Untuk mengubah lebar scrollbar, gunakan scrollbar-width. Anda tidak dapat menyetelnya ke panjang yang sembarang, tetapi Anda dapat menentukan bahwa Anda menginginkan scrollbar thin atau none.

scroll-behavior

scroll-behavior memungkinkan Anda memilih untuk mengaktifkan scrolling yang dikontrol browser ke elemen. Dengan demikian, Anda dapat 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 melanjutkan men-scroll dan halaman di belakang overlay bergerak, inilah yang disebut pengaitan scroll, atau bubbling up ke penampung scroll induk. Properti overscroll-behavior memungkinkan Anda mencegah scroll overflow bocor ke penampung induk (disebut pengaitan scroll).

Pengepasan posisi scroll

Scrolling umumnya lancar, sehingga Anda dapat memosisikan konten dalam scrollport di mana pun Anda inginkan. Untuk beberapa desain, seperti galeri gambar atau konten yang meniru halaman atau slide, Anda mungkin ingin membuat konten bergeser ke scrollport.

Menyiapkan penampung scroll

Untuk mengaktifkan penyambungan scroll, tambahkan scroll-snap-type ke penampung scroll. Pertama-tama, Anda akan menentukan sumbu tempat penyematan scroll akan terjadi. Ini dapat berupa properti logis (block atau inline), properti fisik (x atau y), atau both.

Anda juga dapat menentukan seberapa ketat penempelan scroll. Keketatan default adalah proximity, yang berarti bahwa penampung scroll akan mencoba menyentak jika memungkinkan. Anda juga dapat menyetel ketat ke mandatory untuk memastikan bahwa penampung scroll akan selalu menyentak.

.scroll-container {
    scroll-snap-type: block mandatory;
}

Penyelarasan scroll menyelaraskan elemen dalam batas penuh penampung scroll, tetapi apa yang terjadi jika sebagian penampung scroll tidak terlihat? Misalnya, Anda mungkin memiliki header tetap yang menutupi sebagian penampung scroll. Untuk membantu menyelaraskan elemen yang dipaskan ke bagian yang terlihat dari penampung scroll, Anda dapat menyetel scroll-padding.

Mengontrol elemen yang dapat di-snap

Untuk membuat elemen dapat di-snap, tetapkan properti scroll-snap-align ke start, end, atau center. Jika arah pensesuaian scroll adalah both, Anda dapat menetapkan dua nilai. Tindakan ini menetapkan apakah tepi elemen akan sejajar dengan tepi area scroll, atau apakah akan berada di tengah.

Anda dapat menyesuaikan jarak di sekitar tepi elemen yang di-snap dengan scroll-margin:

scroll-margin juga digunakan untuk menyetel padding saat men-scroll ke elemen:

Untuk membuat scrolling lebih lengket, Anda dapat menambahkan scroll-snap-stop: always ke item dalam penampung scroll. Hal ini tidak mencegah Anda men-scroll melewati beberapa item dalam satu scroll. Jika Anda mengakhiri gerakan men-scroll dengan cara yang membuat scroll berlanjut dengan inersia, scroll akan berakhir di posisi pengepasan berikutnya, bukan berlanjut melewati.

Periksa pemahaman Anda

Resource

Overflow dan Kehilangan Data di CSS dari Smashing Magazine