CSS - Perilaku Overscroll: Panduan untuk Pemula

Halo sana, para ahli CSS masa depan! Hari ini, kita akan memulai perjalanan menarik ke dalam dunia perilaku overscroll di CSS. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan mengexploreasi topik ini bersama-sama, langkah demi langkah. Jadi, ambil tas virtual Anda, dan mari kita masuk ke dalamnya!

Apa Itu Perilaku Overscroll?

Sebelum kita masuk ke detailnya, mari kita pahami apa itu perilaku overscroll. Apakah Anda pernah menggulir halaman di website menggunakan ponsel Anda, dan saat Anda mencapai akhirnya, halaman melakukan hal yang bergetar? Itu adalah perilaku overscroll dalam aksi! Itu seperti saat Anda membaca buku, dan Anda mencoba untuk memutar halaman setelah halaman terakhir - ada sedikit resistensi itu. Properti overscroll-behavior di CSS memungkinkan kita mengendalikan bagaimana halaman web berperilaku dalam situasi seperti ini.

Nilai dan Sintaksis yang Mungkin

Sekarang, mari kita lihat nilai yang berbeda yang dapat kita gunakan dengan overscroll-behavior dan bagaimana menulisnya dalam CSS kita. Ini adalah tabel ringkas untuk menyummarisakan:

Nilai	Deskripsi
auto	Perilaku default - memungkinkan gulir untuk "menyebarkan" ke elemen berikutnya
contain	Menghindari rantai gulir tetapi memungkinkan efek bergetar
none	Menghindari keduanya, rantai gulir dan efek bergetar

Sintaksis dasar tampak seperti ini:

elemen {
overscroll-behavior: nilai;
}

Mari kitauraikan ini dengan beberapa contoh!

Contoh 1: Perilaku Default (auto)

body {
overscroll-behavior: auto;
}

Ini adalah pengaturan default. Itu seperti meninggalkan bukunya di atas meja - itu akan berperilaku seperti yang Anda harapkan, dengan gulir normal dan bergetar.

Contoh 2: Mengontrol Gulir

.scrollable-element {
overscroll-behavior: contain;
}

Imaginilah Anda memiliki div yang dapat digulir di dalam halaman Anda. Dengan 'contain', itu seperti memasukkan bookmark di akhir bab. Anda masih bisa memutar halaman dalam bab itu (efek bergetar), tetapi Anda tidak akan kebetulan memutar ke bab berikutnya (mencegah rantai gulir).

Contoh 3: Tidak Ada Efek Overscroll

.modal {
overscroll-behavior: none;
}

Ini seperti mengglue halaman buku Anda bersama-sama di akhir. Tidak ada lagi memutar atau bergetar - itu hanya berhenti.

Terapkan Pada

Sekarang Anda mungkin bertanya-tanya, "Di mana saya bisa menggunakan properti menarik ini?" Baiklah, itu berlaku untuk semua elemen, tetapi terutama berguna pada:

1. Elemen body
2. Kontainer yang dapat digulir (seperti div dengan overflow: scroll)

CSS overscroll-behavior - Perbandingan Nilai

Mari kita bandingkan nilai ini dengan konteks dunia nyata. Imaginilah Anda mendesain halaman web dengan sidebar yang dapat digulir dan area konten utama.

<div class="sidebar">
<!-- Konten sidebar -->
</div>
<div class="main-content">
<!-- Konten utama -->
</div>

.sidebar {
height: 100vh;
overflow-y: scroll;
overscroll-behavior: contain;
}

.main-content {
overscroll-behavior: auto;
}

Dalam contoh ini, sidebar akan memiliki perilaku gulirnya sendiri yang disembah, sedangkan konten utama akan berperilaku secara normal. Itu seperti memiliki buku mini (sidebar) di dalam buku utama Anda (halaman web) - Anda dapat memutar buku mini tanpa mengganggu buku utama.

CSS overscroll-behavior - Dua Kata Kunci

Tahu Anda bisa menggunakan dua nilai dengan overscroll-behavior? Itu seperti memberikan petunjuk terpisah untuk gulir vertikal dan horizontal.

elemen {
overscroll-behavior: nilai-vertikal nilai-horisontal;
}

Misalnya:

.custom-scroll {
overscroll-behavior: contain auto;
}

Ini memberitahu browser untuk menyembah gulir vertikal tetapi membiarkan perilaku normal untuk gulir horizontal. Itu seperti memiliki buku di mana Anda tidak dapat memutar halaman setelah halaman terakhir secara vertikal, tetapi Anda masih dapat memutar buku secara horizontal!

CSS overscroll-behavior - Properti Terkait

Overscroll-behavior memiliki beberapa saudara di keluarga CSS. Mari kita kenalkan mereka:

1. overscroll-behavior-x: Mengendalikan perilaku gulir horizontal
2. overscroll-behavior-y: Mengendalikan perilaku gulir vertikal

Ini adalah seperti alat spesialis di kotak alat CSS Anda. Ketika Anda memerlukan kontrol yang tepat, ini adalah properti yang Anda gunakan.

.horizontal-scroll {
overscroll-behavior-x: contain;
}

.vertical-scroll {
overscroll-behavior-y: none;
}

Dalam contoh ini, kita menyembah gulir horizontal tetapi mencegah gulir vertikal sepenuhnya. Itu seperti memiliki buku foto panoramic di mana Anda dapat gulir ke samping, tetapi tidak ke atas dan ke bawah!

Aplikasi Praktis: Contoh Modal

Mari kita ubah semua pengetahuan ini ke dalam contoh dunia nyata - jendela modal.

<div class="page-content">
<!-- Konten halaman utama Anda disini -->
</div>
<div class="modal">
<div class="modal-content">
<!-- Konten modal Anda disini -->
</div>
</div>

.page-content {
height: 2000px; /* Konten panjang untuk mengaktifkan gulir */
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overscroll-behavior: contain;
}

.modal-content {
background-color: white;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: contain;
}

Dalam contoh ini, kita telah membuat modal yang menutupi konten utama. Dengan menetapkan overscroll-behavior: contain pada keduanya, modal dan kontennya, kita memastikan bahwa gulir dalam modal tidak mengganggu halaman utama, dan semua overscroll disembah dalam modal itu sendiri.

Kesimpulan

Dan itu adalah, teman-teman saya! Kita telah melakukan perjalanan melalui negeri perilaku overscroll di CSS, dari konsep dasar hingga aplikasi praktis. Ingat, seperti buku yang bagus, memahami CSS memerlukan waktu dan latihan. Jangan takut untuk mencoba dan membuat kesalahan - itu adalah bagaimana kita belajar dan tumbuh.

Sebagai Anda terus melanjutkan petualangan CSS Anda, jangan lupa untuk menyimpan pengetahuan tentang perilaku overscroll di dompet Anda. Itu mungkin terlihat kecil, tetapi itu adalah detail kecil yang dapat memperbaiki desain web Anda dari baik ke yang bagus.

Selamat coding, dan mayat gulir Anda selalu halus!

Credits: Image by storyset