Tingkah laku berlebihan - Trik CSS

The overscroll-behaviorharta dalam kawalan CSS sama ada unsur akan menggunakan "kitab chaining" atau tidak. Anda mungkin pernah mengalami tingkah laku ini sebelum ini dan mungkin menganggap bahawa menatal berfungsi seperti ini di web! Sekiranya anda berada di dalam elemen yang mempunyai tatal sendiri (katakan itu menegak) dan anda telah menatal ke bawah, maka secara lalai, elemen induk seterusnya ke atas (mungkin halaman itu sendiri) mula menatal ke arah itu. Sekiranya anda tidak menginginkan lalai itu, overscroll-behavioradalah yang mengawalnya.

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

Lihat
tingkah laku berlebihan Pen oleh Chris Coyier (@chriscoyier)
di CodePen.

Cascade harta (iaitu, diwarisi), jadi jika anda tidak menyukai unsur yang melakukannya, anda boleh menerapkannya ke badan untuk mengelakkannya berlaku di mana sahaja:

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

Yang nonenilai sepatutnya berhenti affordance tatal lampau , yang meneka cara terbaik saya bahawa barangan seperti itu barangan banding getah yang sesetengah pelayar lakukan, terutamanya peranti dengan touchpad menatal.

Nilai lalai adalah auto.

Sumber

Modul Kelakuan Overscroll CSS Tahap 1
Berita Platform Web

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome	Firefox	IE	Hujung	Safari
65	59	11	79	Tidak

Mudah Alih / Tablet

Android Chrome	Android Firefox	Android	Safari iOS
88	85	81	Tidak

penapis latar
penglihatan bahagian belakang
latar belakang
latar belakang-lampiran
mod latar-campuran
latar-klip
warna latar belakang
gambar latar belakang
latar-asal
latar belakang-kedudukan
latar belakang-ulangan
ukuran latar belakang
berdarah
limpahan sekatan
sempadan
sempadan-sempadan
runtuh sempadan
gambar sempadan
jejari sempadan
jarak sempadan
bawah
kotak-hiasan-rehat
bayangan kotak
ukuran kotak
pecah masuk

sebelah kapsyen
permaidani
warna karet
bentuk karet
jelas
jalan klip
warna
warna-menyesuaikan
kiraan lajur
isi lajur
jurang lajur
peraturan lajur
lajur-peraturan-warna
gaya lajur-peraturan
lebar lajur-peraturan
lajur-rentang
lebar lajur
lajur
berisi
kandungan
kenaikan balas
tetapkan semula kaunter
set kaunter
kursor

arah
paparan

sel kosong

isi
tapis
lentur
asas lentur
arah lentur
aliran lentur
flex-tumbuh
flex-shrink
flex-wrap
terapung
fon
paparan fon
keluarga fon
tetapan fon-ciri
fon-kerning
ukuran fon-optik
Saiz huruf
fon-saiz-sesuaikan
peregangan fon
gaya fon
sintesis fon
varian fon
fon-varian-angka
berat fon

jurang
grid-baris / grid-kolum
grid-templat-lajur / grid-templat-baris

gantung-tanda baca
ketinggian
tanda hubung

Saya

rendering gambar
huruf awal
ukuran sebaris
sisipan
sisipan sisipan
inset-blok-hujung
inset-blok-mula
sisipan-sebaris
inset-sebaris-hujung
inset-sebaris-mulakan
pengasingan

membenarkan-kandungan
membenarkan-item

meninggalkan
jarak huruf
putus talian
pengapit garisan
ketinggian garisan
gaya senarai

margin
blok margin
margin-block-hujung
margin-block-mula
margin-sebaris
margin-inline-end
margin-inline-start
klip topeng
topeng-gambar
mod topeng
asal topeng
kedudukan topeng
topeng-ulangi
saiz topeng
ketinggian maksimum
ukuran maksimum-sebaris
lebar maksimum
ketinggian min
lebar min
mod campuran-campuran

sesuai dengan objek
kedudukan objek
mengimbangi-sauh
jarak mengimbangi
jalan mengimbangi
mengimbangi-memutar
kelegapan
pesanan
anak yatim
garis besar
garis besar-mengimbangi
limpahan
limpahan-sauh
limpahan-bungkus
tingkah laku berlebihan

pembalut
pemisah halaman
urutan cat
perspektif
perspektif-asal
barang-barang tempat
penunjuk-peristiwa
kedudukan

petikan

ubah saiz
betul
jurang baris

tatal tatal
tatal-margin
skrol-padding
tatal-snap-align
tatal-snap-berhenti
tatal-snap-jenis
bar tatal
bar tatal-warna
bar tatal-selokan
lebar tatal-tatal
bentuk-gambar-ambang
bentuk-margin
bentuk-luar
bersuara
strok
strok-dasharray
stroke-dashoffset
strok-linecap
strok-linejoin
lebar pukulan

saiz tab
susun atur jadual
selaras teks
teks-selaras-terakhir
teks-gabungan-tegak
hiasan teks
teks-hiasan-warna
teks-hiasan-baris
teks-hiasan-langkau
teks-hiasan-langkau-dakwat
gaya hiasan-teks
teks-hiasan-ketebalan
teks-inden
teks-membenarkan
orientasi teks
limpahan teks
penyampaian teks
bayangan teks
pukulan teks
transformasi teks
teks-garis bawah-mengimbangi
teks-garis bawah-kedudukan
atas / bawah / kiri / kanan
aksi sentuhan
mengubah
transform-asal
gaya transformasi
peralihan
peralihan-kelewatan
jangka masa peralihan
peralihan-harta
fungsi peralihan-masa

unicode-bidi
julat unikod
pilih pengguna

menegak-sejajar
penglihatan

ruang putih
janda
lebar
akan berubah
kata putus
jarak perkataan
mod penulisan

z-indeks
zum

Pemilih

A
- ::sebelum selepas
- : aktif
- : sebarang pautan
- Adik beradik sebelah
- (atribut)
B
- : kosong
C
- : diperiksa
- : semasa
- Anak
- Kelas
D
- : lalai
- : dir ()
- : kurang upaya
- Keturunan
E
- : kosong
- : diaktifkan
F
- ::surat pertama
- ::Barisan pertama
- : anak pertama
- : jenis pertama
- : fokus
- : kelihatan fokus
- : fokus-dalam
- : masa depan
G
- Adik saudara
H
- : berlegar
Saya
- : dalam jarak
- : tidak tentu
- : tidak sah
- : adalah ()
- ID
J
K
L
- : lang ()
- :anak bongsu
- : jenis terakhir
- : pautan
M
- ::penanda
- : perlawanan ()
N
- : tidak ()
- : nth-anak
- : anak ke-terakhir
- : nth-last-of-type
- : nth-of-type
O
- :anak tunggal
- : hanya jenis
- : pilihan
- :luar kawasan
P
- :: pemegang tempat
- : masa lalu
- : tempat letak ditunjukkan
Q
R
- : baca-tulis /: baca sahaja
- : diperlukan
- : akar
S
- :: pemilihan
T
- : sasaran
- Jenis
U
- : pengguna tidak sah
- Sejagat
V
- : sah
- : dilawati
W
X
Y
Z

Master Frontend Rakan Belajar Kami

Memerlukan latihan pembangunan akhir?

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