overscroll-behaviorProprietatea în controalele CSS dacă un element se va folosi „înlănțuire de derulare“ sau nu. Probabil că ați mai experimentat acest comportament și probabil că ați dat de acord că derularea funcționează așa pe web! Dacă vă aflați în interiorul unui element care are propria sa derulare (să spunem că este verticală) și ați parcurs în jos până la partea de jos a acestuia, atunci în mod implicit, următorul element părinte în sus (poate chiar pagina) începe să deruleze în acea direcție. Dacă nu doriți acea valoare implicită, aceasta overscroll-behavioreste cea care o controlează.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Vedeți
comportamentul de suprasolicitare Pen de către Chris Coyier (@chriscoyier)
pe CodePen.
Proprietatea cascade (adică este moștenită), așa că, dacă nu vă place niciun element care o face, ați putea să o aplicați corpului pentru a preveni apariția oriunde:
body ( overscroll-behavior: contain; /* or "none" */ )noneValoarea ar trebui să se oprească affordance derularea suplimentară , care mi cele mai bune mijloace cred că chestii de genul asta chestii benzi de cauciuc care unele browsere, în special dispozitive cu defilare touchpad - ului.
Valoarea implicită este auto.
Resurse
- CSS Overscroll Behavior Module Level 1
- Știri despre platforma web
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 65 | 59 | 11 | 79 | Nu |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | Nu |
- filtru de fundal
- vizibilitate în spate
- fundal
- atașament de fundal
- fundal-blend-mode
- clip de fundal
- culoare de fundal
- imagine de fundal
- fundal-origine
- fundal-poziție
- fundal-repetare
- dimensiunea fundalului
- sângera
- blocare-depășire
- frontieră
- hotar-hotar
- colaps-frontieră
- border-image
- frontieră-rază
- spațiere la margine
- fund
- decor-cutie-pauză
- cutie-umbră
- dimensionarea cutiei
- spargere în interior
- subtitrare
- semn de omisiune
- culoare caret
- în formă de caret
- clar
- clip-path
- culoare
- reglați culoarea
- număr de coloane
- umplere coloană
- coloană-gol
- coloana-regula
- coloană-regulă-culoare
- stil-regulă coloană
- coloană-regulă-lățime
- coloană
- lățimea coloanei
- coloane
- conține
- conţinut
- contraincrement
- contra-resetare
- contra-set
- cursor
- direcţie
- afişa
- celule goale
- completati
- filtru
- contracta
- flex-bază
- direcție flexibilă
- flex-flow
- flex-cresc
- flex-shrink
- flex-wrap
- pluti
- font
- afișarea fontului
- familie de fonturi
- setări-caracteristică font
- font-kerning
- font-optic-dimensionare
- marimea fontului
- font-size-adjust
- font-stretch
- stilul fontului
- font-sinteză
- font-variantă
- font-variantă-numerică
- grosimea fontului
- decalaj
- grilă-rând / grilă-coloană
- grilă-șablon-coloane / grilă-șablon-rânduri
- agățat-punctuație
- înălţime
- cratime
- redarea imaginii
- litera inițială
- inline-size
- medalion
- inset-block
- inset-block-end
- inset-block-start
- inserat în linie
- inset-inline-end
- inset-inline-start
- izolare
- justify-content
- elemente justificate
- stânga
- spațiul dintre litere
- linie-break
- clemă de linie
- inaltimea liniei
- stil-listă
- marjă
- bloc de marjă
- margin-block-end
- margin-block-start
- margin-inline
- margin-inline-end
- margin-inline-start
- masca-clip
- masca-imagine
- modul mască
- masca-origine
- masca-pozitie
- masca-repeta
- dimensiunea măștii
- înălțimea maximă
- max-inline-size
- lățimea maximă
- min-înălțime
- lățime min
- modul mix-blend
- potrivire obiect
- poziția obiectului
- ancoră offset
- offset-distance
- cale offset
- offset-rotire
- opacitate
- Ordin
- orfani
- contur
- contur-compensare
- revărsare
- overflow-ancoră
- overflow-wrap
- comportament de derulare excesivă
- căptușeală
- pagină-pagină
- vopsea-comandă
- perspectivă
- perspectivă-origine
- obiecte de loc
- pointer-evenimente
- poziţie
- citate
- redimensionare
- dreapta
- rând-gol
- scroll-comportament
- scroll-margin
- scroll-padding
- scroll-snap-align
- scroll-snap-stop
- tip scroll-snap
- bara de derulare
- culoare bara de derulare
- scrollbar-gutter
- scrollbar-width
- formă-imagine-prag
- forma-margine
- forma-exterior
- vorbi
- accident vascular cerebral
- accident vascular cerebral-dasharray
- stroke-dashoffset
- accident vascular cerebral
- stroke-linejoin
- lățimea cursei
- dimensiunea filei
- dispunerea tabelului
- aliniere text
- text-align-last
- text-combina-vertical
- decor-text
- text-decor-culoare
- text-decor-linie
- text-decorare-săritură
- text-decorare-săritură-cerneală
- text-decor-stil
- text-decor-grosime
- text-indent
- text-justifică
- orientare text
- text-overflow
- redarea textului
- text-umbră
- text-stroke
- text-transform
- text-subliniere-offset
- text-subliniere-poziție
- sus / jos / stânga / dreapta
- acțiune tactilă
- transforma
- transformare-origine
- stil de transformare
- tranziție
- întârziere de tranziție
- durata tranziției
- proprietate de tranziție
- funcție-temporizare-tranziție
- unicode-bidi
- unicode-range
- selectare de utilizator
- vertical-aliniat
- vizibilitate
- spatiu alb
- văduve
- lăţime
- se va schimba
- pauză de cuvinte
- spațierea cuvintelor
- modul de scriere
- indexul z
- zoom
- A
- ::înainte după
- :activ
- : orice-link
- Frate adiacent
- (atribut)
- B
- :gol
- C
- : verificat
- :actual
- Copil
- Clasă
- D
- :Mod implicit
- : dir ()
- :dezactivat
- Descendent
- E
- :gol
- :activat
- F
- ::prima literă
- ::prima linie
- :primul copil
- : primul de tip
- : focalizare
- : focus-vizibil
- : focus-inside
- :viitor
- G
- Frate generală
- H
- :planare
- Eu
- : în raza de acțiune
- : nedeterminat
- :invalid
- :este()
- ID
- J
- K
- L
- : lang ()
- :ultimul copil
- : ultimul tip
- :legătură
- M
- :: marker
- :chibrituri()
- N
- :nu()
- : al n-lea copil
- : n-ultimul-copil
- : n-ultimul-de-tip
- : al n-lea de tip
- O
- :singurul copil
- : numai de tip
- : opțional
- : în afara intervalului
- P
- :: substituent
- :trecut
- : substituent-arătat
- Î
- R
- : citire-scriere /: numai citire
- :necesar
- :rădăcină
- S
- ::selecţie
- T
- :ţintă
- Tip
- U
- : utilizator nevalid
- universal
- V
- :valabil
- :vizitat
- W
- X
- Da
- Z
Frontend Masters
Aveți nevoie de pregătire pentru dezvoltare front-end?
Frontend Masters este cel mai bun loc pentru a-l obține. Au cursuri despre toate cele mai importante tehnologii front-end, de la React la CSS, de la Vue la D3 și nu numai cu Node.js și Full Stack.