Overscroll-Verhalten CSS-Tricks

Die overscroll-behaviorEigenschaft in CSS steuert, ob ein Element die Bildlaufverkettung verwendet oder nicht. Sie haben dieses Verhalten wahrscheinlich schon einmal erlebt und es vielleicht als selbstverständlich angesehen, dass das Scrollen im Web so funktioniert! Wenn Sie sich in einem Element befinden, das über einen eigenen Bildlauf verfügt (z. B. vertikal), und nach unten gescrollt haben, beginnt das nächste übergeordnete Element (möglicherweise die Seite selbst) standardmäßig mit dem Bildlauf in diese Richtung. Wenn Sie diesen Standard nicht möchten, overscroll-behaviorwird er gesteuert.

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

Siehe das Pen-
Overscroll-Verhalten von Chris Coyier (@chriscoyier)
auf CodePen.

Die Eigenschaft wird kaskadiert (dh vererbt). Wenn Sie also kein Element mögen, das dies tut, können Sie es auf den Körper anwenden, um zu verhindern, dass es irgendwo passiert:

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

Der noneWert soll die Erschwinglichkeit von Overscrolls stoppen , was meiner besten Vermutung nach so etwas wie Gummibänder macht, wie es manche Browser tun, insbesondere Geräte mit Touchpad-Bildlauf.

Der Standardwert ist auto.

Ressourcen

CSS-Overscroll-Verhaltensmodul Stufe 1
Web Platform News

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom	Feuerfuchs	IE	Kante	Safari
65	59	11	79	Nein

Handy / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nein

Hintergrundfilter
Sichtbarkeit der Rückseite
Hintergrund
Hintergrund-Anhang
Hintergrund-Mischmodus
Hintergrund-Clip
Hintergrundfarbe
Hintergrundbild
Hintergrundherkunft
Hintergrundposition
Hintergrund Wiederholung
Hintergrundgröße
bluten
Blocküberlauf
Rand
Grenze-Grenze
Grenzkollaps
Randbild
Randradius
Randabstand
Unterseite
Box-Dekoration-Pause
Box Schatten
Box-Größe
innen einbrechen

Beschriftungsseite
Caret
Caret-Farbe
Caret-Form
klar
Clip-Pfad
Farbe
Farbanpassung
Spaltenanzahl
Spaltenfüllung
Spaltenlücke
Spaltenregel
Spaltenregelfarbe
Spaltenregelstil
Spaltenregelbreite
Spaltenspanne
Spaltenbreite
Säulen
enthalten
Inhalt
Gegeninkrement
Counter-Reset
Gegensatz
Mauszeiger

Richtung
Anzeige

leere Zellen

füllen
Filter
biegen
Flex-Basis
Flex-Richtung
Flex-Flow
Flex-Grow
Flex-Shrink
Flex-Wrap
schweben
Schriftart
Schriftanzeige
Schriftfamilie
Font-Feature-Einstellungen
Font-Kerning
Schriftgröße
Schriftgröße
Schriftgröße anpassen
Font-Stretch
Schriftstil
Schriftsynthese
Schriftvariante
Schriftvariante-numerisch
Schriftgröße

Spalt
Gitterzeile / Gitterspalte
Raster-Vorlagen-Spalten / Raster-Vorlagen-Zeilen

hängende Interpunktion
Höhe
Bindestriche

ich

Bildwiedergabe
Anfangsbuchstabe
Inline-Größe
Einsatz
Einschubblock
Inset-Block-Ende
Inset-Block-Start
Inset-Inline
Inset-Inline-Ende
Inset-Inline-Start
Isolation

Inhalt rechtfertigen
Artikel rechtfertigen

links
Buchstaben-Abstand
Zeilenumbruch
Leitungsklemme
Zeilenhöhe
Listenstil

Spanne
Randblock
Rand-Block-Ende
Margin-Block-Start
Margin-Inline
Rand-Inline-Ende
Margin-Inline-Start
Maskenclip
Maskenbild
Maskenmodus
Maskenursprung
Maskenposition
Maskenwiederholung
Maskengröße
maximale Höhe
Max-Inline-Größe
maximale Breite
Mindesthöhe
min-Breite
Mix-Blend-Modus

Objektanpassung
Objektposition
Offset-Anker
Versatzabstand
Versatzpfad
Versatz drehen
Opazität
bestellen
Waisenkinder
Gliederung
Konturversatz
Überlauf
Überlaufanker
Überlaufverpackung
Overscroll-Verhalten

Polsterung
Seitenumbruch
Lackierauftrag
Perspektive
perspektivischer Ursprung
Platzgegenstände
Zeigerereignisse
Position

Zitate

Größe ändern
richtig
Reihenlücke

Bildlaufverhalten
Bildlaufrand
Scroll-Padding
Scroll-Snap-Align
Scroll-Snap-Stop
Scroll-Snap-Typ
Scrollleiste
Bildlaufleistenfarbe
Bildlaufleisten-Rinne
Bildlaufleistenbreite
Form-Bild-Schwelle
Formrand
Form außen
sprechen
streicheln
Schlaganfall-Dasharray
Strich-Dashoffset
Strichkappe
Strich-Line-Join
Strichbreite

Tab-Größe
Tabellenlayout
Textausrichtung
Text-Align-Last
Text-Mähdrescher-aufrecht
Textdekoration
Text-Dekoration-Farbe
Textdekorationslinie
Text-Dekoration-überspringen
Text-Dekoration-Skip-Tinte
Text-Dekoration-Stil
Text-Dekoration-Dicke
Texteinzug
Text rechtfertigen
Textorientierung
Textüberlauf
Text-Rendering
Textschatten
Textstrich
Texttransformation
Text-Unterstreichungs-Offset
Text-Unterstreichungsposition
oben / unten / links / rechts
Berührungsaktion
verwandeln
Transformationsursprung
Transformationsstil
Überleitung
Übergangsverzögerung
Übergangszeit
Übergangseigenschaft
Übergangszeitfunktion

Unicode-Bidi
Unicode-Bereich
Benutzerauswahl

vertikal ausrichten
Sichtweite

Leerraum
Witwen
Breite
wird sich verändern
Wortumbruch
Wortabstand
Schreibmodus

Z-Index
Zoomen

Selektoren

EIN
- ::vorher Nachher
- :aktiv
- : any-link
- Benachbarte Geschwister
- (Attribut)
B.
- :leer
C.
- : geprüft
- :Strom
- Kind
- Klasse
D.
- :Standard
- : dir ()
- :behindert
- Nachfahre
E.
- :leer
- :aktiviert
F.
- ::erster Brief
- ::erste Linie
- :erstes Kind
- : first-of-type
- :Fokus
- : Fokus sichtbar
- : Fokus innerhalb
- :Zukunft
G
- Allgemeine Geschwister
H.
- :schweben
ich
- :im Bereich
- :unbestimmt
- :ungültig
- : is ()
- ICH WÜRDE
J.
K.
L.
- : lang ()
- :letztes Kind
- : letzter Typ
- :Verknüpfung
M.
- ::Marker
- :Streichhölzer()
N.
- :nicht()
- : n-tes Kind
- : n-tes letztes Kind
- : n-ter-letzter-Typ
- : n-ter Typ
Ö
- :Einzelkind
- : nur vom Typ
- :Optional
- :außer Reichweite
P.
- :: Platzhalter
- :Vergangenheit
- : Platzhalter angezeigt
Q.
R.
- : read-write /: schreibgeschützt
- :erforderlich
- :Wurzel
S.
- ::Auswahl
T.
- :Ziel
- Art
U.
- : Benutzer ungültig
- Universal
V.
- :gültig
- :hat besucht
W.
X.
Y.
Z.

Unser Lernpartner

Frontend Masters

Benötigen Sie ein Front-End-Entwicklungstraining?

Frontend Masters ist der beste Ort, um es zu bekommen. Sie bieten Kurse zu allen wichtigen Front-End-Technologien an, von React bis CSS, von Vue bis D3 und darüber hinaus mit Node.js und Full Stack.