A propriedade CSS overscroll-behavior-inline
- Página anterior overscroll-behavior-block
- Próxima página overscroll-behavior-x
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; }
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; }
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
- Página anterior overscroll-behavior-block
- Próxima página overscroll-behavior-x