Atribut overscroll-behavior CSS

Definisi dan penggunaan

overscroll-behavior Atribut digunakan untuk menonaktifkan gilingan urutan (scroll chaining) atau tanggapan penyesuaian guling (overscroll affordance) saat mencoba mengguling melebihi batas guling.

Chain guling: Saat mengalami penyesuaian guling yang berlebih di suatu elemen, akan mengakibatkan perilaku guling родителя elemen. Ini adalah perilaku baku.

Feedback penyesuaian guling: Tanggapan yang diberikan kepada pengguna saat mencoba mengguling melebihi batas guling. Contohnya, saat mencoba mengguling melebihi puncak halaman di perangkat bergerak, biasanya akan muncul tanggapan visual dan halaman akan direfresh.

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 penarikan lebar ekstra
  • Arah y: tanpa rangkaian penarikan, tetapi mengijinkan umpan balik penarikan lebar ekstra

Jika atribut overscroll-behavior memiliki satu nilai:

overscroll-behavior: contain;
  • Arah x dan y: tanpa rangkaian penarikan, tetapi mengijinkan umpan balik penarikan lebar ekstra

Contoh

Contoh 1

Tutup rangkaian penarikan untuk elemen <div> yang dapat digerakkan:

#yellowDiv {
  overscroll-behavior: contain;
}

Coba sendiri

Contoh 2: Syntaks dual nilai:

Atur overscroll-behavior Nilai atribut diatur ke auto nonedengan mengijinkan rangkaian penarikan arah x dan umpan balik penarikan lebar ekstra, tetapi arah y tidak diijinkan:

#pinkDiv {
  overscroll-behavior: auto none;
}

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai Deskripsi
auto Mengijinkan perilaku rangkaian penarikan dan umpan balik penarikan lebar ekstra. Nilai default.
contain Mengijinkan perilaku umpan balik penarikan lebar ekstra, tetapi tidak mengijinkan rangkaian penarikan.
none Tidak mengijinkan umpan balik penarikan lebar ekstra atau perilaku rangkaian penarikan.
initial Atur atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen orangtua. Lihat inherit.

Detil teknis

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

Dukungan peramban

Angka di tabel menunjukkan versi peramban pertama yang mendukung atribut ini.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

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

Halaman terkait

Referensi：Atribut overscroll-behavior-x CSS

Referensi：Atribut overscroll-behavior-y CSS

Referensi：Atribut scroll-behavior CSS

Referensi：Atribut scroll-margin CSS

Referensi：Atribut scroll-padding CSS

Referensi：Atribut scroll-snap-align CSS