A overscroll-behaviorpropriedade em CSS controla se um elemento usará “encadeamento de rolagem” ou não. Você provavelmente já experimentou esse comportamento antes e talvez tenha assumido que a rolagem funciona assim na web! Se você estiver dentro de um elemento que tem sua própria rolagem (digamos que seja vertical) e rolou para baixo até a parte inferior dele, então, por padrão, o próximo elemento pai para cima (talvez a própria página) começa a rolar nessa direção. Se você não quer esse padrão, overscroll-behavioré o que o controla.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Veja o Pen
overscroll-behaviour de Chris Coyier (@chriscoyier)
no CodePen.
A propriedade é aplicada em cascata (isto é, é herdada), então se você não gosta de nenhum elemento fazendo isso, você pode aplicá-la ao corpo para evitar que aconteça em qualquer lugar:
body ( overscroll-behavior: contain; /* or "none" */ )O nonevalor deve parar a capacidade de overscroll , o que meu melhor palpite significa que coisas como aquela coisa de elástico que alguns navegadores fazem, particularmente dispositivos com rolagem do touchpad.
O valor padrão é auto.
Recursos
- CSS Overscroll Behavior Module Nível 1
- Notícias da plataforma web
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 65 | 59 | 11 | 79 | Não |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Não |
- filtro de fundo
- visibilidade da face posterior
- fundo
- anexo de fundo
- modo de mesclagem de fundo
- clipe de fundo
- cor de fundo
- imagem de fundo
- origem do fundo
- posição de fundo
- fundo de repetição
- tamanho do fundo
- sangrar
- estouro de bloco
- fronteira
- fronteira
- colapso da fronteira
- imagem de borda
- raio de fronteira
- espaçamento de borda
- fundo
- quebra-caixa-decoração
- Sombra da caixa
- tamanho da caixa
- arrombamento
- lado da legenda
- acento circunflexo
- acento circunflexo
- forma de acento circunflexo
- Claro
- caminho de corte
- cor
- ajuste de cor
- contagem de colunas
- preenchimento de coluna
- lacuna de coluna
- regra da coluna
- coluna-regra-cor
- estilo de regra de coluna
- coluna-regra-largura
- span de coluna
- largura da coluna
- colunas
- conter
- contente
- contra-incremento
- contra-reset
- contra-jogo
- cursor
- direção
- exibição
- células vazias
- preencher
- filtro
- flex
- base flexível
- direção flexível
- flex-flow
- flex-grow
- flex-encolher
- envoltório flexível
- flutuador
- Fonte
- exibição de fontes
- família de fontes
- font-feature-settings
- font-kerning
- tamanho óptico da fonte
- tamanho da fonte
- font-size-ajustar
- font-stretch
- estilo de fonte
- síntese de fontes
- variante da fonte
- font-variant-numeric
- espessura da fonte
- Gap = Vão
- grade-linha / grade-coluna
- grade-modelo-colunas / grade-modelo-linhas
- pontuação suspensa
- altura
- hífens
- renderização de imagem
- letra inicial
- tamanho embutido
- inserir
- bloco de inserção
- fim de bloco de inserção
- inserção-bloco-início
- embutido
- extremidade embutida
- início embutido
- isolamento
- justify-content
- justificar-itens
- deixou
- espaçamento entre letras
- quebra de linha
- pinça de linha
- altura da linha
- estilo de lista
- margem
- bloco de margem
- margin-block-end
- margin-block-start
- margin-inline
- margin-inline-end
- margin-inline-start
- máscara-clipe
- imagem-máscara
- modo de máscara
- origem da máscara
- posição da máscara
- máscara-repetição
- tamanho da máscara
- altura máxima
- max-inline-size
- largura máxima
- altura mínima
- largura mínima
- mix-blend-mode
- ajuste ao objeto
- posição do objeto
- âncora de deslocamento
- offset-distance
- caminho de deslocamento
- deslocar-girar
- opacidade
- ordem
- órfãos
- contorno
- contorno-deslocamento
- transbordar
- âncora de transbordamento
- overflow-wrap
- comportamento excessivo
- preenchimento
- quebra de página
- ordem de pintura
- perspectiva
- perspectiva-origem
- itens de lugar
- eventos de ponteiro
- posição
- citações
- redimensionar
- direita
- lacuna de linha
- comportamento de rolagem
- margem de rolagem
- scroll-padding
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- Barra de rolagem
- scrollbar-color
- scrollbar-gutter
- largura da barra de rolagem
- limite da imagem da forma
- margem de forma
- forma-fora
- falar
- acidente vascular encefálico
- traço-dasharray
- stroke-dashoffset
- capa de linha de traço
- linha de traço
- largura do traçado
- tab-size
- layout de mesa
- alinhamento de texto
- texto-alinhar-último
- text-combine-upright
- decoração de texto
- texto-decoração-cor
- linha de decoração de texto
- text-decoration-skip
- text-decoration-skip-ink
- estilo de decoração de texto
- espessura da decoração do texto
- text-indent
- justificar texto
- orientação de texto
- estouro de texto
- renderização de texto
- sombra de texto
- traço de texto
- transformação de texto
- texto-sublinhado-deslocamento
- posição do sublinhado do texto
- superior / inferior / esquerda / direita
- toque-ação
- transformar
- origem de transformação
- estilo de transformação
- transição
- atraso de transição
- duração da transição
- propriedade de transição
- função de tempo de transição
- Unicode-bidi
- alcance unicode
- seleção do usuário
- alinhamento vertical
- visibilidade
- espaço em branco
- viúvas
- largura
- vai mudar
- quebra de palavras
- espaçamento entre palavras
- modo de escrita
- z-index
- ampliação
- UMA
- ::antes Depois
- :ativo
- : qualquer link
- Irmão adjacente
- (atributo)
- B
- :em branco
- C
- :verificado
- :atual
- Criança
- Aula
- D
- :predefinição
- : dir ()
- :Desativado
- Descendente
- E
- :vazio
- :ativado
- F
- ::primeira carta
- ::primeira linha
- :primeiro filho
- : primeiro do tipo
- :foco
- : foco visível
- : foco dentro
- :futuro
- G
- Irmão em geral
- H
- :flutuar
- eu
- : dentro do alcance
- :indeterminado
- :inválido
- :é()
- EU IA
- J
- K
- eu
- : lang ()
- : último filho
- : último do tipo
- :ligação
- M
- ::marcador
- :partidas()
- N
- :não()
- : enésima criança
- : enésimo último filho
- : enésimo último do tipo
- : enésimo de tipo
- O
- :filho único
- : apenas do tipo
- :opcional
- :fora de alcance
- P
- :: placeholder
- :passado
- : placeholder-mostrado
- Q
- R
- : leitura-gravação /: somente leitura
- :requerido
- :raiz
- S
- ::seleção
- T
- :alvo
- Modelo
- você
- : usuário inválido
- Universal
- V
- :válido
- :visitou
- C
- X
- Y
- Z
Frontend Masters
Precisa de treinamento de desenvolvimento de front-end?
O frontend Masters é o melhor lugar para obtê-lo. Eles têm cursos sobre todas as tecnologias front-end mais importantes, de React a CSS, de Vue a D3 e muito mais com Node.js e Full Stack.