Penjelasan mendetail tentang atribut overscroll-behavior di CSS

Penulis：Eve Cole Waktu Pembaruan：2024-12-20 16:43:31

overscroll-behavior adalah properti di CSS yang mengontrol perilaku elemen saat pengguliran terjadi dan rentang gulir melebihi batasnya. Atribut ini sangat berguna untuk meningkatkan pengalaman pengguna, khususnya pada perangkat seluler. Atribut ini dapat digunakan untuk menghindari efek "memantul" default atau menyesuaikan efek ini ketika pengguna mencoba menggulir elemen yang telah mencapai batas gulir.

tata bahasa

 perilaku gulir berlebihan: otomatis |.tidak ada |.
/* Atau atur secara terpisah untuk sumbu X dan sumbu Y*/
overscroll-behavior-x: otomatis |.tidak ada |.
perilaku-overscroll-y: otomatis |.tidak ada |.

auto : nilai default. Elemen ini menggunakan perilaku pengguliran defaultnya. Di sebagian besar browser, ini berarti bahwa pengguliran akan memiliki efek "melenting" (yaitu konten akan sedikit memantul kembali setelah mencapai batas) ketika melebihi rentang pengguliran. contain : Mencegah penyebaran rantai gulir. Jika pengguliran terjadi pada elemen tertentu dan konten elemen telah digulir keluar batas, peristiwa gulir tidak akan disebarkan ke elemen induk elemen. Hal ini membantu menciptakan area pengguliran independen dan menghindari konflik pengguliran yang tidak perlu. none : Mencegah perilaku default apa pun saat menggulir, termasuk efek "melenting". Artinya, ketika pengguna mencoba menggulir elemen yang telah mencapai batasnya, mereka tidak akan melihat efek atau animasi pengguliran apa pun.

Contoh

Katakanlah Anda memiliki halaman yang berisi area dalam yang dapat di-scroll (seperti daftar atau galeri gambar). Jika Anda ingin area dalam ini berhenti ketika di-scroll ke tepi tanpa menghasilkan efek "melenting" default, Anda dapat mengaturnya seperti ini:

 .scrollable-area {
  perilaku gulir berlebihan: tidak ada;
  tinggi: 200 piksel;
  overflow-y: otomatis; /* Izinkan pengguliran sumbu Y*/
}

Dalam contoh ini, kelas .scrollable-area diterapkan ke elemen tempat Anda ingin mengontrol perilaku pengguliran. Atur overscroll-behavior: none; sehingga saat menggulir ke atas atau bawah elemen, tidak akan ada efek atau animasi gulir tambahan.

Hal-hal yang perlu diperhatikan

Tidak semua browser mendukung atribut overscroll-behavior . Oleh karena itu, pengujian yang memadai disarankan ketika mengandalkan fungsionalitas properti ini. Beberapa browser mungkin mendukung properti overscroll-behavior-x dan overscroll-behavior-y , sehingga Anda dapat mengontrol perilaku pengguliran horizontal dan vertikal. Namun dukungan ini juga terbatas sehingga diperlukan pengujian juga. Gunakan atribut ini dengan hati-hati saat merancang antarmuka pengguna dengan mempertimbangkan aksesibilitas dan pengalaman pengguna. Dalam beberapa kasus, perilaku pengguliran default (seperti efek "melenting") mungkin lebih intuitif dan mudah dipahami oleh pengguna.

Demikianlah artikel tentang atribut overscroll-behavior di CSS. Untuk informasi lebih lanjut tentang atribut overscroll-behavior CSS, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah .downcode.com!