CSS — 24. Overflow

CSS Overflow

Text Overflow

Gunakan properti text-overflow pada elemen apa pun yang berisi teks, misalnya paragraf, ini menentukan bagaimana teks muncul ketika tidak sesuai dengan ruang elemen yang tersedia.

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

Property Overflow

• Properti overflow-y mengontrol overflow di sepanjang sumbu veritkal viewport perangkat, oleh karena itu overflow-y dapat bergeser ke atas dan ke bawah.
• Properti overflow-x mengontrol overflow di sepanjang sumbu horizontal viewport perangkat, oleh karena itu overflow-y dapat bergeser ke kiri dan ke kanan.
• Singkatan: overflow: hidden scroll;

Nilai overflow: hidden akan memotong konten pada arah yang spesifik dan kemudian tidak memunculkan scrollbar.

Get Kurniadi’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Nilai overflow: scroll memungkinkan scrollbar untuk menggeser konten. Bahkan jika konten tidak mengalami overflow, scrollbar akan tetap terlihat.

Nilai overflow: clip sama seperti hidden. Akan tetapi, clip tidak mengizinkan browser untuk melakukan scroll ataupun programmatic scroll

Nilai overflow: auto sama seperti scroll. Akan tetapi, auto hanya akan memunculkan scrollbar jika konten benar-benar mengalami overflow.

Scroll Behaviour

Scroll-behavior memungkinkan kita memilih bagaimana navigasi dalam halaman seperti .scrollTo() atau tautan dihandle.

Contoh:
@media (prefers-reduceed-motion: no-preference) {
.scroll-view{
scroll-behaviour: auto;
}
}

Properti overscroll-behaviour memungkinkan kita untuk mencegah/menentukan scrolling dari children ke parent (disebut scroll chaining).

Contoh:
.my-element {
overscroll-behaviour: auto;
}