La overscroll-behaviorpropriété en CSS contrôle si un élément utilisera ou non le «chaînage de défilement». Vous avez probablement déjà rencontré ce comportement et vous avez peut-être pris pour acquis que le défilement fonctionne comme celui-ci sur le Web! Si vous êtes à l'intérieur d'un élément qui a son propre défilement (disons qu'il est vertical) et que vous l'avez fait défiler vers le bas, alors par défaut, l'élément parent suivant (peut-être la page elle-même) commence à défiler dans cette direction. Si vous ne voulez pas cette valeur par défaut, overscroll-behaviorc'est ce qui la contrôle.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Voir le
comportement de survol de Pen par Chris Coyier (@chriscoyier)
sur CodePen.
La propriété cascades (c'est-à-dire est héritée), donc si vous n'aimez aucun élément le faire, vous pouvez l'appliquer au corps pour l'empêcher de se produire n'importe où:
body ( overscroll-behavior: contain; /* or "none" */ )La nonevaleur est censée arrêter le dépassement de la capacité de défilement , ce qui, à ma meilleure supposition, signifie que des trucs comme les bandes élastiques que certains navigateurs font, en particulier les appareils avec défilement du pavé tactile.
La valeur par défaut est auto.
Ressources
- Module CSS Overscroll Behavior Niveau 1
- Actualités de la plateforme Web
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 65 | 59 | 11 | 79 | Non |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | Non |
- filtre de toile de fond
- visibilité de la face arrière
- Contexte
- background-attachment
- background-blend-mode
- clip de fond
- Couleur de l'arrière plan
- image de fond
- background-origin
- position de fond
- Répétition du fond
- taille de fond
- saigner
- block-overflow
- frontière
- frontière-frontière
- border-collapse
- image de bordure
- rayon de bordure
- espacement des bordures
- bas
- boîte-décoration-pause
- boîte ombre
- taille de la boîte
- effraction
- côté légende
- caret
- couleur caret
- en forme de caret
- dégager
- clip-path
- Couleur
- ajuster la couleur
- nombre de colonnes
- remplissage de colonne
- écart de colonne
- règle de colonne
- Colonne-règle-couleur
- style de règle de colonne
- largeur de règle de colonne
- colonne-span
- largeur de colonne
- Colonnes
- contenir
- teneur
- contre-incrément
- contre-réinitialisation
- contre-ensemble
- le curseur
- direction
- affichage
- cellules vides
- remplir
- filtre
- fléchir
- base flexible
- flex-direction
- flex-flow
- Flex-Grow
- flex-shrink
- flex-wrap
- flotter
- Police de caractère
- affichage de la police
- famille de polices
- paramètres de fonctionnalité de police
- crénage de police
- dimensionnement optique des polices
- taille de police
- ajustement de la taille de la police
- font-stretch
- le style de police
- synthèse de polices
- variante de police
- font-variant-numeric
- poids de la police
- écart
- grille-ligne / grille-colonne
- grid-template-columns / grid-template-rows
- pendaison-ponctuation
- la taille
- traits d'union
- rendu d'image
- lettre initiale
- taille en ligne
- encart
- bloc encastré
- encart-bloc-fin
- insertion-bloc-début
- encastré en ligne
- insert-inline-end
- encart-inline-start
- isolement
- justifier le contenu
- justify-items
- gauche
- l'espacement des lettres
- saut de ligne
- pince de ligne
- hauteur de la ligne
- style liste
- marge
- bloc de marge
- marge-bloc-fin
- marge-bloc-début
- marge en ligne
- margin-inline-end
- margin-inline-start
- masque-clip
- masque-image
- masque-mode
- masque-origine
- masque-position
- masque-répéter
- masque-taille
- hauteur maximum
- taille-max-en-ligne
- largeur maximale
- hauteur min
- largeur min
- mix-blend-mode
- ajustement à l'objet
- position de l'objet
- offset-ancre
- décalage-distance
- offset-path
- offset-rotation
- opacité
- ordre
- orphelins
- contour
- contour-offset
- débordement
- trop-plein-ancre
- débordement
- comportement de survol
- rembourrage
- saut de page
- ordre de peinture
- perspective
- perspective-origine
- objets de lieu
- événements de pointeur
- positionner
- devis
- redimensionner
- droit
- écart de ligne
- comportement de défilement
- marge de défilement
- remplissage de défilement
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- barre de défilement
- couleur de la barre de défilement
- barre de défilement-gouttière
- largeur de la barre de défilement
- seuil-image-forme
- marge de forme
- forme extérieure
- parler
- accident vasculaire cérébral
- accident vasculaire cérébral-dasharray
- stroke-dashoffset
- coup-linecap
- course-lignejoin
- largeur du trait
- tab-size
- mise en page de table
- texte-align
- text-align-last
- texte-combiner-debout
- texte-décoration
- texte-décoration-couleur
- texte-décoration-ligne
- texte-décoration-saut
- texte-décoration-skip-ink
- texte-décoration-style
- texte-décoration-épaisseur
- retrait du texte
- text-justify
- orientation du texte
- text-overflow
- rendu de texte
- ombre de texte
- trait de texte
- transformation de texte
- text-underline-offset
- texte-souligné-position
- haut / bas / gauche / droite
- action tactile
- transformer
- origine de la transformation
- style de transformation
- transition
- délai de transition
- transition-durée
- propriété de transition
- fonction de synchronisation de transition
- unicode-bidi
- gamme unicode
- sélection par l'utilisateur
- alignement vertical
- visibilité
- espace blanc
- veuves
- largeur
- changera
- saut de mots
- espacement des mots
- mode d'écriture
- index z
- Zoom
- UNE
- ::avant après
- :actif
- : n'importe quel lien
- Frère et soeur adjacente
- (attribut)
- B
- :Vide
- C
- :vérifié
- :actuel
- Enfant
- Classer
- ré
- :défaut
- : dir ()
- :désactivée
- Descendant
- E
- :vider
- :activé
- F
- ::première lettre
- ::Première ligne
- :premier enfant
- : premier du type
- :concentrer
- : mise au point visible
- : focus-dedans
- :avenir
- g
- Frère et soeur général
- H
- :flotter
- je
- :dans la gamme
- :indéterminé
- :invalide
- :est()
- identifiant
- J
- K
- L
- : lang ()
- :dernier enfant
- : dernier type
- :lien
- M
- ::marqueur
- :allumettes()
- N
- :ne pas()
- : nième enfant
- : nième-dernier-enfant
- : nth-last-of-type
- : nième de type
- O
- :fils unique
- : uniquement de type
- :optionnel
- : hors de portée
- P
- :: espace réservé
- :passé
- : affichage de l'espace réservé
- Q
- R
- : lecture-écriture /: lecture seule
- :obligatoire
- :racine
- S
- ::sélection
- T
- :cibler
- Taper
- U
- : utilisateur non valide
- Universel
- V
- :valide
- :a visité
- W
- X
- Oui
- Z
maîtres frontend partenaires d'apprentissage
Besoin d'une formation en développement front-end?
Frontend Masters est le meilleur endroit pour l'obtenir. Ils ont des cours sur toutes les technologies front-end les plus importantes, de React au CSS, de Vue à D3, et au-delà avec Node.js et Full Stack.