Sifat overscroll-behavior CSS

Definisi dan penggunaan

overscroll-behavior Atribut digunakan untuk menonaktifkan kaitan geser (scroll chaining) atau feedback geser melebihi batas (overscroll affordance) saat mencoba geser melebihi batas geser.

Kaitan geser: Saat menggeser melebihi batas di suatu elemen, akan menyebabkan perilaku geser elemen induk. Ini adalah perilaku baku.

Pembalikan umpan geser: Feedback yang diberikan kepada pengguna saat mencoba geser melebihi batas geser. Contohnya, saat mencoba geser melebihi puncak halaman di perangkat siap pakai, biasanya menampilkan umpan visual dan memperbarui halaman.

overscroll-behavior Atribut ini adalah bentuk singkat dari atribut berikut:

overscroll-behavior Nilai atribut dapat diatur dengan berbagai cara:

Jika atribut overscroll-behavior memiliki dua nilai:

overscroll-behavior: none contain;
  • Arah x: tanpa perilaku penyeretan yang berlebihan
  • Arah y: tanpa rantai penyeretan, tetapi memungkinkan umpan balik penyeretan yang berlebihan

Jika atribut overscroll-behavior memiliki satu nilai:

overscroll-behavior: contain;
  • Arah x dan y: tanpa rantai penyeretan, tetapi memungkinkan umpan balik penyeretan yang berlebihan

Contoh

Contoh 1

Tutup rantai penyeretan elemen <div> yang dapat digerakkan:

#yellowDiv {
  overscroll-behavior: contain;
}

Coba sendiri

Contoh 2: Syntaxa dual nilai:

Atur overscroll-behavior Nilai properti diatur ke auto none，memungkinkan rantai penyeretan dan umpan balik penyeretan yang berlebihan di arah x, tetapi tidak di arah y:

#pinkDiv {
  overscroll-behavior: auto none;
}

Coba sendiri

Syntaxa CSS

overscroll-behavior: auto|contain|none|initial|inherit;

Nilai properti

Nilai Deskripsi
auto Mengizinkan perilaku rantai penyeretan dan umpan balik penyeretan yang berlebihan. Nilai default.
contain Mengizinkan umpan balik penyeretan yang berlebihan tetapi tidak mengizinkan rantai penyeretan.
none Tidak mengizinkan umpan balik penyeretan yang berlebihan atau perilaku rantai penyeretan.
initial Atur properti ini ke nilai default. Lihat initial.
inherit Mengambil properti ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: auto
Inheritance: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Properti yang berhubungan dengan animasi.
Versi: CSS3
Syntaxa JavaScript: object.style.overscrollBehavior="none"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung properti ini.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* Dalam Microsoft Edge, nilai properti 'none' dianggap 'contain', hal ini salah.

Laman berkaitan

Rujukan：Sifat overscroll-behavior-x CSS

Rujukan：Sifat overscroll-behavior-y CSS

Rujukan：Sifat scroll-behavior CSS

Rujukan：Sifat scroll-margin CSS

Rujukan：Sifat scroll-padding CSS

Rujukan：Sifat scroll-snap-align CSS