CSS - Perilaku Overscroll: Panduan untuk Pemula

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

Apa Itu Perilaku Overscroll?

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

Nilai dan Sintaks

Sekarang, mari kita lihat nilai yang berbeda yang dapat kita gunakan dengan overscroll-behavior dan bagaimana menulisnya dalam CSS kita. Berikut adalah tabel ringkasan:

Nilai	Deskripsi
auto	Perilaku default - mengijinkan gulir "menyebarkan" ke elemen berikutnya
contain	Menghindari rangkaian gulir tetapi mengijinkan efek getar
none	Menghindari rangkaian gulir dan efek getar

Sintaks dasar terlihat 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 buku Anda di atas meja - itu akan berperilaku seperti yang Anda harapkan, dengan gulir normal dan getar.

Contoh 2: Mengontrol Gulir

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

Bayangkan Anda memiliki div yang dapat digulir di dalam halaman web Anda. Dengan 'contain', itu seperti menempatkan bookmark di akhir bab. Anda masih dapat memutar halaman dalam bab itu (efek getar), tetapi Anda tidak akan secara tidak sengaja memutar ke bab berikutnya (mencegah rangkaian gulir).

Contoh 3: Tidak Ada Efek Overscroll

.modal {
overscroll-behavior: none;
}

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

Terapkan Pada

Sekarang, Anda mungkin bertanya-tanya, "Di mana saya bisa menggunakan properti menarik ini?" Well, itu berlaku untuk semua elemen, tetapi sangat 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 scenario dunia nyata. Bayangkan 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 terbatas, sementara konten utama akan berperilaku secara normal. Itu seperti memiliki buku mini (sidebar) di dalam buku utama (halaman web) - Anda dapat memutar buku mini tanpa mengganggu buku utama.

CSS overscroll-behavior - Dua Keyword Nilai

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

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

Misalnya:

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

Ini memberitahu browser untuk membatasi gulir vertikal tetapi mengijinkan 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 dalam keluarga CSS. Mari kita kenalkan mereka:

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

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

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

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

Dalam contoh ini, kita membatasi gulir horizontal tetapi mencegah gulir vertikal sepenuhnya. Itu seperti memiliki buku pandang yang Anda dapat gulir ke samping, tetapi tidak ke atas dan ke bawah!

Aplikasi Praktis: Contoh Modal

Mari kita aplikasikan semua pengetahuan ini dengan 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 mengijinkan 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 mengatur overscroll-behavior: contain pada keduanya, modal dan kontennya, kita memastikan bahwa gulir dalam modal tidak mengganggu halaman utama, dan semua overscroll terbatas dalam modal itu sendiri.

Kesimpulan

Dan itu adalah, teman-teman saya! Kita telah melakukan perjalanan melalui dunia perilaku overscroll CSS, dari konsep dasar ke 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.

Buatlah pengetahuan tentang perilaku overscroll ini tetap dalam tas Anda. Itu mungkin terlihat kecil, tetapi itu adalah detail kecil yang dapat menambah nilai ke desain web Anda dari baik ke yang bagus.

Selamat coding, dan semoga gulir Anda selalu halus!

Credits: Image by storyset