Perilaku overscroll - Trik CSS

The overscroll-behaviorproperti dalam kontrol CSS apakah sebuah elemen akan menggunakan “scroll chaining” atau tidak. Anda mungkin pernah mengalami perilaku ini sebelumnya dan mungkin menerima begitu saja bahwa pengguliran berfungsi seperti ini di web! Jika Anda berada di dalam elemen yang memiliki penggulirannya sendiri (katakanlah vertikal) dan Anda telah menggulir ke bawah ke bawah, maka secara default, elemen induk berikutnya ke atas (mungkin halaman itu sendiri) mulai bergulir ke arah itu. Jika Anda tidak ingin default itu, overscroll-behaviorapa yang mengontrolnya.

.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )

Lihat
Perilaku overscroll Pena oleh Chris Coyier (@chriscoyier)
di CodePen.

Properti berjenjang (mis., Diwariskan), jadi jika Anda tidak suka elemen apa pun melakukannya, Anda dapat menerapkannya ke badan untuk mencegahnya terjadi di mana saja:

body ( overscroll-behavior: contain; /* or "none" */ )

The nonenilai seharusnya berhenti affordance gulir , yang saya duga berarti terbaik yang hal-hal seperti itu hal karet banding bahwa beberapa browser lakukan, terutama perangkat dengan touchpad bergulir.

Nilai defaultnya adalah auto.

Sumber daya

Modul Perilaku CSS Overscroll Level 1
Berita Platform Web

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome	Firefox	YAITU	Tepi	Safari
65	59	11	79	Tidak

Ponsel / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Tidak

backdrop-filter
visibilitas ke belakang
Latar Belakang
background-attachment
background-blend-mode
klip latar belakang
warna latar belakang
gambar latar belakang
background-origin
background-position
ulangi latar belakang
background-size
berdarah
block-overflow
berbatasan
batas-batas
border-collapse
gambar pembatas
radius batas
spasi batas
bawah
kotak-dekorasi-istirahat
box-shadow
ukuran kotak
pembobolan

caption-side
tanda sisipan
warna caret
bentuk caret
bersih
jalur klip
warna
warna-sesuaikan
kolom-hitungan
mengisi kolom
kolom-celah
kolom-aturan
kolom-aturan-warna
gaya-aturan-kolom
kolom-aturan-lebar
kolom-span
lebar kolom
kolom
berisi
kandungan
counter-increment
reset balik
counter-set
kursor

arah
layar

sel kosong

mengisi
Saring
melenturkan
flex-basis
arah fleksibel
aliran fleksibel
flex-grow
flex-shrink
flex-wrap
mengapung
font
font-display
font-family
font-feature-settings
font-kerning.dll
font-optical-sizing
ukuran huruf
font-size-sesuaikan
font-stretch
gaya tulisan
font-synthesis
font-variant
font-variant-numeric
font-weight

celah
kisi-baris / kisi-kolom
grid-template-kolom / grid-template-baris

gantung-tanda baca
tinggi
tanda hubung

saya

rendering gambar
huruf awal
ukuran sebaris
sisipan
blok inset
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
isolasi

membenarkan-konten
membenarkan-item

kiri
spasi huruf
line-break
penjepit garis
tinggi garis
gaya daftar

batas
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
klip topeng
gambar topeng
mode topeng
asal topeng
posisi topeng
ulangi topeng
ukuran topeng
tinggi maksimal
max-inline-size
lebar maks
tinggi min
min-width
campuran-campuran-mode

HAI

object-fit
posisi objek
offset-jangkar
jarak offset
jalur offset
offset-putar
kegelapan
memesan
yatim piatu
garis besar
outline-offset
meluap
overflow-anchor
overflow-wrap
perilaku overscroll

lapisan
jeda halaman
cat-order
perspektif
perspektif-asal
tempat-barang
pointer-peristiwa
posisi

tanda kutip

ubah ukuran
Baik
celah baris

perilaku gulir
scroll-margin
scroll-padding
scroll-snap-align
scroll-snap-stop
scroll-snap-type
scroll bar
scrollbar-color
scrollbar-selokan
scrollbar-width
bentuk-gambar-ambang
bentuk-margin
bentuk-luar
berbicara
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-width

ukuran tab
tata letak tabel
text-align
text-align-last
teks-gabungan-tegak
dekorasi teks
warna-dekorasi-teks
teks-dekorasi-baris
teks-dekorasi-lewati
teks-dekorasi-lewati-tinta
gaya dekorasi teks
ketebalan-dekorasi-teks
teks-indentasi
teks-rata
orientasi teks
text-overflow
rendering teks
bayangan teks
teks-stroke
teks-transformasi
teks-garis bawah-offset
text-underline-position
atas / bawah / kiri / kanan
aksi sentuh
mengubah
transformasi-asal
gaya transformasi
transisi
transisi-penundaan
transisi-durasi
transisi-properti
transisi-waktu-fungsi

unicode-bidi
rentang unicode
pilih pengguna

perataan vertikal
visibilitas

ruang putih
janda
lebar
akan berubah
kata-istirahat
spasi kata
mode menulis

z-indeks
Perbesar

Penyeleksi

SEBUAH
- ::sebelum setelah
- :aktif
- : tautan apa saja
- Saudara yang berdekatan
- (atribut)
B
- :kosong
C
- : diperiksa
- :arus
- Anak
- Kelas
D
- : default
- : dir ()
- :dengan disabilitas
- Keturunan
E
- :kosong
- :diaktifkan
F
- ::surat pertama
- ::garis pertama
- :anak pertama
- : tipe pertama
- :fokus
- : terlihat fokus
- : fokus-dalam
- :masa depan
G
- Saudara umum
H.
- : hover
saya
- :dalam lingkup
- : tidak pasti
- : tidak valid
- :aku s()
- Indo
J
K
L
- : lang ()
- :anak terakhir
- : tipe terakhir
- :tautan
M
- :: penanda
- : pertandingan ()
N
- :tidak()
- : anak ke-n
- : anak-terakhir-n
- : nth-last-of-type
- : tipe ke-n
HAI
- :hanya anak
- : satu-satunya
- :pilihan
- :diluar jangkauan
P.
- :: placeholder
- :lalu
- : placeholder-ditampilkan
Q
R
- : read-write /: read-only
- :yg dibutuhkan
- :akar
S
- ::pilihan
T
- :target
- Tipe
U
- : pengguna-tidak valid
- Universal
V.
- :sah
- : dikunjungi
W
X
Y
Z

Master Frontend Mitra Pembelajaran kami

Butuh pelatihan pengembangan front-end?

Frontend Masters adalah tempat terbaik untuk mendapatkannya. Mereka memiliki kursus tentang semua teknologi front-end yang paling penting, dari React hingga CSS, dari Vue hingga D3, dan seterusnya dengan Node.js dan Full Stack.