Overscroll-gedrag - CSS-trucs

De overscroll-behavioreigenschap in CSS bepaalt of een element "scroll chaining" gebruikt of niet. U hebt dit gedrag waarschijnlijk eerder meegemaakt en vond het misschien vanzelfsprekend dat scrollen op internet zo werkt! Als u zich in een element bevindt dat zijn eigen scrollen heeft (zeg maar dat het verticaal is) en u hebt naar beneden gescrolld, dan begint standaard het volgende bovenliggende element (misschien de pagina zelf) in die richting te scrollen. Als u die standaard niet wilt, overscroll-behavioris dat wat het controleert.

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

Zie het pen-
overscroll-gedrag van Chris Coyier (@chriscoyier)
op CodePen.

De eigenschap cascades (dat wil zeggen, wordt geërfd), dus als je het niet leuk vindt dat enig element het doet, kun je het op het lichaam toepassen om te voorkomen dat het ergens gebeurt:

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

De nonewaarde is bedoeld om overscroll-betaalmiddelen te stoppen , wat volgens mij betekent dat dingen zoals die rubberen banding-dingen die sommige browsers doen, met name apparaten met scrollen via het touchpad.

De standaardwaarde is auto.

Middelen

CSS Overscroll-gedragsmodule niveau 1
Web Platform Nieuws

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome	Firefox	D.W.Z	Rand	Safari
65	59	11	79	Nee

Mobiel / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nee

achtergrondfilter
backface-zichtbaarheid
achtergrond
achtergrond-bijlage
achtergrond-blend-mode
achtergrond-clip
Achtergrond kleur
achtergrond afbeelding
achtergrond-oorsprong
achtergrond-positie
achtergrond herhaling
achtergrondgrootte
bloeden
blok-overloop
grens
grensgrens
grens instorten
border-afbeelding
grens-straal
grensafstand
bodem
doos-decoratie-pauze
doos-schaduw
box-sizing
inbraak

bijschriftzijde
dakje
caret-kleur
caret-vorm
Doorzichtig
clip-pad
kleur
kleur aanpassen
aantal kolommen
kolom vullen
column-gap
kolomregel
column-rule-color
column-rule-stijl
column-rule-breedte
kolom overspanning
kolombreedte
kolommen
bevatten
inhoud
tegenstijging
teller reset
tegenstel
cursor

richting
Scherm

lege cellen

vullen
filter
buigen
flex-basis
flex-richting
flex-stroom
flex-groeien
flex-krimp
flex-wrap
vlotter
lettertype
lettertype-weergave
font-familie
font-feature-instellingen
font-kerning
lettertype-optische-grootte
lettertypegrootte
font-size-adjust
font-stretch
lettertype
lettertype-synthese
lettertype-variant
font-variant-numeriek
lettertype dikte

kloof
grid-rij / grid-kolom
grid-template-kolommen / grid-template-rijen

hangende interpunctie
hoogte
koppeltekens

beeldweergave
beginletter
inline-formaat
inzet
inzetblok
inzet-block-end
inzet-blok-start
inzet-inline
inzet-inline-einde
inzet-inline-start
isolatie

rechtvaardigen-inhoud
rechtvaardigen-items

links
letterafstand
regeleinde
lijnklem
lijnhoogte
lijststijl

marge
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
masker-clip
masker-afbeelding
masker-modus
masker-oorsprong
masker-positie
masker herhalen
maskergrootte
maximale hoogte
max-inline-maat
Maximale wijdte
min-hoogte
min-breedte
mix-blend-modus

object-fit
object-positie
offset-anker
offset-afstand
offset-pad
offset-roteren
ondoorzichtigheid
bestellen
wezen
schets
omtrek-offset
overloop
overloop-anker
overloop-wrap
overscroll-gedrag

opvulling
pagina-einde
lak bestellen
perspectief
perspectief-oorsprong
plaats-items
pointer-evenementen
positie

citaten

formaat wijzigen
Rechtsaf
rij-gap

scroll-gedrag
scroll-marge
scroll-opvulling
scroll-snap-align
scroll-snap-stop
scroll-snap-type
schuifbalk
schuifbalk-kleur
scrollbar-goot
scrollbar-breedte
vorm-afbeelding-drempel
vorm-marge
vorm-buiten
spreken
beroerte
beroerte-dasharray
slag-dashoffset
slag-linecap
stroke-linejoin
streekbreedte

tab-formaat
tafel-indeling
text-align
text-align-last
tekst-combineren-rechtop
tekst-decoratie
tekst-decoratie-kleur
tekst-decoratie-regel
tekst-decoratie-overslaan
tekst-decoratie-skip-inkt
tekst-decoratie-stijl
tekst-decoratie-dikte
tekst streepje
tekst uitvullen
tekstoriëntatie
text-overflow
tekstweergave
schaduw tekst
tekststreep
teksttransformatie
text-underline-offset
text-underline-position
boven / onder / links / rechts
touch-actie
transformeren
transform-origin
transform-stijl
overgang
overgangsvertraging
overgangsduur
transitie-eigenschap
overgang-timing-functie

unicode-bidi
unicode-bereik
user-select

verticaal uitlijnen
zichtbaarheid

witte ruimte
weduwen
breedte
zal veranderen
woordonderbreking
woordafstand
schrijfmodus

z-index
zoom

Selectoren

EEN
- ::Voor na
- :actief
- : elke-link
- Aangrenzende broer of zus
- (attribuut)
B
- :blanco
C
- : gecontroleerd
- :actueel
- Kind
- Klasse
D
- :standaard
- : dir ()
- :gehandicapt
- Afstammeling
E.
- :leeg
- :ingeschakeld
F.
- ::eerste brief
- ::Eerste lijn
- :eerstgeborene
- : eerste soort
- :focus
- : focus zichtbaar
- : focus-binnen
- :toekomst
G
- Algemene broer of zus
H.
- :zweven
ik
- :binnen bereik
- : onbepaald
- :ongeldig
- : is ()
- ID kaart
J
K
L.
- : lang ()
- :laatste kind
- : laatste van het type
- :koppeling
M.
- ::markeerstift
- :wedstrijden()
N
- :niet()
- : n-kind
- : n-laatste-kind
- : n-de-laatste-van-type
- : n-van-type
O
- :enig kind
- : alleen-van-type
- :optioneel
- :buiten bereik
P.
- :: tijdelijke aanduiding
- :Verleden
- : tijdelijke aanduiding weergegeven
Q
R
- : read-write /: read-only
- :verplicht
- :wortel
S
- ::selectie
T
- :doelwit
- Type
U
- : gebruiker-ongeldig
- Universeel
V.
- :Geldig
- : bezocht
W.
X
Y
Z

Onze Learning Partner

Frontend Masters

Front-end ontwikkelingstraining nodig?

Frontend Masters is de beste plaats om het te krijgen. Ze hebben cursussen over de belangrijkste front-endtechnologieën, van React tot CSS, van Vue tot D3, en nog veel meer met Node.js en Full Stack.