A propriedade CSS overscroll-behavior-inline

Definição e uso

overscroll-behavior-inline A propriedade é usada para desativar a cadeia de rolagem do elemento ou o feedback de deslizar além dos limites de rolagem na direção da linha.

Atenção:Para ativar o overscroll-behavior na direção da linha, você pode precisar usar gestos de deslizar no touchpad ou na tela tátil.

A cadeia de deslize é o comportamento de rolagem do pai que ocorre quando há deslize excessivo em um elemento. Isso é o comportamento padrão.

O feedback de deslize excessivo é o feedback fornecido quando o usuário tenta rolar além dos limites de rolagem. Por exemplo, em dispositivos móveis, quando tenta rolar além do topo da página, geralmente há um feedback visual de atualização da página.

do CSS overscroll-behavior-inline e overscroll-behavior-block A propriedade é semelhante à overscroll-behavior-x e overscroll-behavior-y A propriedade é muito semelhante, mas overscroll-behavior-inline e overscroll-behavior-block A propriedade depende da direção bloco e da direção inline.

Atenção:Propriedades CSS relacionadas writing-mode Define a direção inline. Isso afeta se a direção inline é na direção x ou y, e overscroll-behavior-inline O resultado da propriedade. Para páginas em inglês, a direção inline é da esquerda para a direita, e a direção bloco é para baixo.

Exemplo

Exemplo 1

Desative a cadeia de deslize no elemento <div> redimensionável na direção inline:

#yellowDiv {
  overscroll-behavior-inline: contain;
}

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

Defina o <div> elemento writing-mode Quando o valor da propriedade 'vertical-rl' é definido, a direção inline se torna y, portanto overscroll-behavior-inline Agora funciona na direção y, em vez da direção x:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-inline: contain;
}

Experimente você mesmo

Sintaxe do CSS

overscroll-behavior-inline: auto|contain|none|initial|inherit;

Valor da propriedade

Valor Descrição
auto Permite o comportamento de cadeia de deslize e feedback de deslize excessivo. Valor padrão.
contain Permite o comportamento de feedback de deslize excessivo, mas não permite a cadeia de deslize.
none Não permite feedback de deslize excessivo ou comportamento de cadeia de deslize.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.overscrollBehaviorInline="none"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
63.0 18.0 59.0 16.0 50.0

Páginas relacionadas

Referência:A propriedade CSS overscroll-behavior

Referência:A propriedade CSS overscroll-behavior-block

Referência:A propriedade CSS overscroll-behavior-x

Referência:A propriedade CSS overscroll-behavior-y

Referência:A propriedade CSS scroll-behavior

Referência:A propriedade CSS scroll-margin

Referência:A propriedade CSS scroll-padding

Referência:A propriedade CSS scroll-snap-align

Referência:A propriedade writing-mode do CSS