Den overscroll-behavioregendom i CSS styr huruvida ett element kommer att använda ”scroll kedja” eller inte. Du har förmodligen upplevt detta beteende tidigare och kanske tog det för givet att rulla fungerar så här på webben! Om du är inne i ett element som har sin egen rullning (säg att det är vertikalt) och du har rullat ner till botten av det, börjar som standard nästa överordnade element uppåt (kanske själva sidan) att rulla i den riktningen. Om du inte vill ha denna standard, overscroll-behaviorär det som styr den.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Se
Chris Coyiers (@chriscoyier)
pennans överskrollningsbeteende på CodePen.
Fastighetens kaskader (dvs. ärvs), så om du inte gillar något element som gör det kan du applicera det på kroppen för att förhindra att det händer var som helst:
body ( overscroll-behavior: contain; /* or "none" */ )Det nonevärdet är tänkt att stoppa överrullning affordance , som min bästa gissning innebär att sånt gummi banding saker som vissa webbläsare gör, särskilt enheter med pekplatta rullning.
Standardvärdet är auto.
Resurser
- CSS Overscroll Behavior Module Nivå 1
- Webbplattformsnyheter
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 65 | 59 | 11 | 79 | Nej |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nej |
- bakgrundsfilter
- synlighet på baksidan
- bakgrund
- bakgrundsbilaga
- bakgrundsblandningsläge
- bakgrund-klipp
- bakgrundsfärg
- bakgrundsbild
- bakgrund-ursprung
- bakgrundsposition
- bakgrund-upprepa
- bakgrundsstorlek
- blöda
- block-overflow
- gräns
- gränsgräns
- gräns-kollaps
- gränsbild
- gränsradie
- gränsavstånd
- botten
- box-dekoration-break
- box-skugga
- box-dimensionering
- inbrott
- bildtextsida
- markör
- vaktfärg
- vaktform
- klar
- klippbana
- Färg
- färgjustera
- kolumnräkning
- kolumnfyllning
- kolumn-gap
- kolumnregel
- kolumn-regel-färg
- kolumn-regel-stil
- kolumn-regel-bredd
- kolumn-span
- kolumnbredd
- kolumner
- innehålla
- innehåll
- motinkrement
- motåterställning
- motuppsättning
- markören
- riktning
- visa
- tomma celler
- fylla
- filtrera
- böja
- flex-bas
- flex-riktning
- flex-flöde
- flex-grow
- flex-krympning
- flex-wrap
- flyta
- font
- font-display
- typsnittsfamilj
- font-feature-settings
- font-kerning
- font-optisk storlek
- textstorlek
- justera teckenstorlek
- font-stretch
- typsnitt
- font-syntes
- font-variant
- font-variant-numerisk
- font-vikt
- glipa
- grid-row / grid-column
- rutmall-kolumner / rutmall-rader
- hängning-skiljetecken
- höjd
- bindestreck
- bildåtergivning
- första bokstaven
- inline-storlek
- infälld
- infälld-block
- infälld-block-ände
- insättning-block-start
- infälld
- infälld-inline-end
- infälld-inline-start
- isolering
- rättfärdiga-innehåll
- rättfärdiga-objekt
- vänster
- teckenavstånd
- radbrytning
- linjeklämma
- radavstånd
- liststil
- marginal
- marginalblock
- marginal-block-ände
- marginal-block-start
- marginalinline
- margin-inline-end
- margin-inline-start
- mask-klipp
- mask-bild
- maskläge
- mask-ursprung
- maskposition
- mask-upprepa
- maskstorlek
- maximal höjd
- max-inline-storlek
- maximal bredd
- min höjd
- min bredd
- mix-blend-mode
- objektpassning
- objektposition
- offset-ankare
- offset-avstånd
- offset-path
- offset-rotera
- opacitet
- ordning
- föräldralösa
- översikt
- kontur-offset
- svämma över
- överflödsankare
- overflow-wrap
- överskrollningsbeteende
- stoppning
- sidbrytning
- färgbeställning
- perspektiv
- perspektiv-ursprung
- platsföremål
- pekare-händelser
- placera
- citat
- ändra storlek
- rätt
- radgap
- rullbeteende
- rulla marginal
- rullning-stoppning
- bläddra-snäpp-justera
- scroll-snap-stop
- bläddra-snäpp-typ
- rullningslist
- rullningsfärg
- rullningsrännränna
- rullningsbredd
- form-bild-tröskel
- formmarginal
- form-utanför
- tala
- stroke
- stroke-dasharray
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- slagbredd
- flikstorlek
- bordslayout
- textjustera
- text-align-last
- text-kombinera-upprätt
- text-dekoration
- text-dekoration-färg
- text-dekor-linje
- text-dekoration-hoppa över
- text-dekoration-hoppa över bläck
- text-dekoration-stil
- text-dekoration-tjocklek
- textindrag
- textjustera
- textorientering
- text-overflow
- textåtergivning
- text-skugga
- text-stroke
- text-transform
- text-understrykning-offset
- text-understrykning-position
- upp / ned / vänster / höger
- touch-action
- omvandla
- förvandla-ursprung
- transform-stil
- övergång
- övergångsfördröjning
- Övergångsperiod
- övergångsegendom
- övergång-timing-funktion
- unicode-bidi
- unicode-intervall
- användarval
- vertikaljustera
- synlighet
- vitt utrymme
- änkor
- bredd
- kommer att ändras
- ordbrytning
- ordavstånd
- skrivläge
- z-index
- zoom
- A
- ::före efter
- :aktiva
- : någon länk
- Intilliggande syskon
- (attribut)
- B
- :tom
- C
- :kontrollerade
- :nuvarande
- Barn
- Klass
- D
- :standard
- : dir ()
- :Inaktiverad
- Ättling
- E
- :tömma
- :aktiverad
- F
- ::första bokstaven
- ::Första linjen
- :förstfödde
- : första typ
- :fokus
- : fokus-synlig
- : fokus-inuti
- :framtida
- G
- Allmänt syskon
- H
- :sväva
- Jag
- :inom räckhåll
- :obestämd
- :ogiltig
- :är()
- ID
- J
- K
- L
- : lang ()
- :sista barnet
- : sista typ
- :länk
- M
- ::markör
- :tändstickor()
- N
- :inte()
- : nth-barn
- : nionde sista barnet
- : n-sista-av-typen
- : nth-of-type
- O
- :enda barnet
- : endast av typen
- :frivillig
- :utom räckhåll
- P
- ::Platshållare
- :över
- : platshållare visas
- F
- R
- : skriv-skriv /: skrivskyddad
- :nödvändig
- :rot
- S
- ::urval
- T
- :mål
- Typ
- U
- : användare ogiltig
- Universell
- V
- :giltig
- :besökta
- W
- X
- Y
- Z
Frontend Masters
Behöver du utvecklingsutbildning i front-end?
Frontend Masters är det bästa stället att få det. De har kurser om alla de viktigaste front-end-teknikerna, från React till CSS, från Vue till D3 och därefter med Node.js och Full Stack.