La overscroll-behaviorproprietà in CSS controlla se un elemento utilizzerà o meno lo "scroll chaining". Probabilmente hai già sperimentato questo comportamento in passato e forse hai dato per scontato che lo scorrimento funzioni in questo modo sul web! Se ti trovi all'interno di un elemento che ha il proprio scorrimento (diciamo che è verticale) e lo hai fatto scorrere fino in fondo, per impostazione predefinita, il successivo elemento genitore in alto (forse la pagina stessa) inizia a scorrere in quella direzione. Se non vuoi quel valore predefinito, overscroll-behaviorè ciò che lo controlla.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Vedere il
comportamento di overscroll della penna di Chris Coyier (@chriscoyier)
su CodePen.
La proprietà cascade (cioè è ereditata), quindi se non ti piace che nessun elemento lo faccia, puoi applicarlo al corpo per evitare che accada ovunque:
body ( overscroll-behavior: contain; /* or "none" */ )Si nonesuppone che il valore impedisca l' overscroll , che la mia ipotesi migliore significa che cose come quella roba in gomma che fanno alcuni browser, in particolare i dispositivi con lo scorrimento del touchpad.
Il valore predefinito è auto.
Risorse
- CSS Overscroll Behavior Module Livello 1
- Notizie dalla piattaforma web
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 65 | 59 | 11 | 79 | No |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | No |
- filtro sullo sfondo
- visibilità sul retro
- sfondo
- sfondo-allegato
- background-blend-mode
- clip di sfondo
- colore di sfondo
- immagine di sfondo
- background-origin
- background-position
- ripetizione in background
- dimensione dello sfondo
- sanguinare
- block-overflow
- confine
- confine di confine
- confine-crollo
- immagine di confine
- border-radius
- spaziatura tra i bordi
- parte inferiore
- scatola-decorazione-pausa
- scatola-ombra
- dimensionamento della scatola
- irruzione
- didascalia
- caret
- caret-color
- a forma di caret
- chiaro
- percorso clip
- colore
- regolazione del colore
- conteggio colonne
- riempimento della colonna
- tra le colonne
- regola di colonna
- colonna-regola-colore
- stile regola colonna
- colonna-regola-larghezza
- colonna-span
- larghezza della colonna
- colonne
- contenere
- soddisfare
- controincremento
- counter-reset
- counter-set
- cursore
- direzione
- Schermo
- celle vuote
- riempire
- filtro
- flettere
- base flessibile
- direzione flessibile
- flusso flessibile
- flex-grow
- flessione
- avvolgimento flessibile
- galleggiante
- font
- visualizzazione dei caratteri
- famiglia di font
- font-feature-settings
- crenatura dei caratteri
- font-optical-dimensionamento
- dimensione del font
- regolazione della dimensione del carattere
- font-stretch
- stile del font
- sintesi dei caratteri
- variante di carattere
- font-variant-numeric
- font-weight
- divario
- griglia-riga / griglia-colonna
- griglia-modello-colonne / griglia-modello-righe
- punteggiatura sospesa
- altezza
- trattini
- rendering delle immagini
- lettera iniziale
- dimensione in linea
- inserto
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inizio inset-inline
- solitudine
- giustificare il contenuto
- giustificare-articoli
- sinistra
- spaziatura del carattere
- interruzione di linea
- line-clamp
- altezza della linea
- in stile elenco
- margine
- blocco di margine
- margin-block-end
- margin-block-start
- margine in linea
- margin-inline-end
- margin-inline-start
- clip per maschera
- maschera-immagine
- modalità maschera
- maschera-origine
- posizione della maschera
- maschera-ripetizione
- dimensione della maschera
- altezza massima
- max-inline-size
- larghezza massima
- altezza min
- larghezza min
- modalità mix-blend
- adattamento all'oggetto
- posizione dell'oggetto
- offset-anchor
- distanza di offset
- offset-path
- rotazione offset
- opacità
- ordine
- orfani
- schema
- contorno-offset
- trabocco
- overflow-anchor
- overflow-wrap
- comportamento di overscroll
- imbottitura
- interruzione di pagina
- ordine di pittura
- prospettiva
- prospettiva-origine
- luogo-oggetti
- eventi-puntatore
- posizione
- citazioni
- ridimensionare
- giusto
- distanza tra le file
- comportamento di scorrimento
- margine di scorrimento
- imbottitura di scorrimento
- scorrimento-snap-allineamento
- scorrimento-snap-stop
- scroll-snap-type
- barra di scorrimento
- scrollbar-color
- scrollbar-grondaia
- larghezza della barra di scorrimento
- forma-immagine-soglia
- forma-margine
- forma esterna
- parlare
- colpo
- ictus-dasharray
- offset tratto-tratto
- stroke-linecap
- stroke-linejoin
- larghezza del tratto
- tab-size
- disposizione dei tavoli
- text-align
- text-align-last
- testo-combina-verticale
- decorazione del testo
- testo-decorazione-colore
- text-decoration-line
- testo-decorazione-salto
- text-decoration-skip-ink
- stile di decorazione del testo
- testo-decorazione-spessore
- indentatura del testo
- giustificare il testo
- orientamento del testo
- text-overflow
- rendering del testo
- text-shadow
- tratto di testo
- text-transform
- testo-sottolineatura-offset
- text-underline-position
- alto / basso / sinistra / destra
- tocco-azione
- trasformare
- trasformare-origine
- stile di trasformazione
- transizione
- ritardo di transizione
- durata della transizione
- proprietà di transizione
- funzione di temporizzazione della transizione
- unicode-bidi
- intervallo unicode
- selezione dell'utente
- allineamento verticale
- visibilità
- spazio bianco
- vedove
- larghezza
- cambierà
- word-break
- spaziatura delle parole
- modalità di scrittura
- z-index
- Ingrandisci
- UN
- ::prima dopo
- :attivo
- : any-link
- Fratello adiacente
- (attributo)
- B
- : vuoto
- C
- : controllato
- :attuale
- Bambino
- Classe
- D
- :predefinito
- : dir ()
- :Disabilitato
- Discendente
- E
- :vuoto
- :abilitato
- F
- ::prima lettera
- ::prima linea
- :Primogenito
- : primo di tipo
- :messa a fuoco
- : messa a fuoco visibile
- : messa a fuoco dentro
- :futuro
- G
- Fratello generale
- H
- : hover
- io
- : in gamma
- :indeterminato
- :non valido
- :è()
- ID
- J
- K
- L
- : lang ()
- :ultimo bambino
- : ultimo tipo
- : collegamento
- M
- :: marker
- : corrisponde ()
- N
- :non()
- : ennesimo figlio
- : ennesimo figlio
- : nth-last-of-type
- : ennesimo di tipo
- O
- :figlio unico
- : solo di tipo
- :opzionale
- :fuori dal limite
- P
- :: segnaposto
- :passato
- : segnaposto mostrato
- Q
- R
- : lettura-scrittura /: sola lettura
- :necessario
- :radice
- S
- ::selezione
- T
- :bersaglio
- genere
- U
- : utente non valido
- universale
- V
- :valido
- : visitato
- W
- X
- Y
- Z
master frontend per partner di apprendimento
Hai bisogno di formazione sullo sviluppo front-end?
Frontend Masters è il posto migliore per ottenerlo. Hanno corsi su tutte le più importanti tecnologie front-end, da React a CSS, da Vue a D3, e oltre con Node.js e Full Stack.