Propriedade CSS overscroll-behavior

Definição e uso

overscroll-behavior A propriedade é usada para desativar a cadeia de rolagem (scroll chaining) ou o feedback de rolagem excessiva (overscroll affordance) ao tentar rolar além dos limites da rolagem.

Cadeia de rolagem: Quando há rolagem excessiva em um elemento, isso pode causar o comportamento de rolagem do elemento pai. Este é o comportamento padrão.

Feedback de rolagem excessiva: O feedback fornecido ao usuário ao tentar rolar além dos limites da rolagem. Por exemplo, ao tentar rolar além da parte superior da página em um dispositivo móvel, geralmente é exibido um feedback visual e a página é atualizada.

overscroll-behavior A propriedade é a forma abreviada das seguintes propriedades:

• overscroll-behavior-x
• overscroll-behavior-y

overscroll-behavior Os valores da propriedade podem ser configurados de diferentes maneiras:

Se a propriedade overscroll-behavior tiver dois valores:

overscroll-behavior: none contain;

• X direção: sem comportamento de deslizamento excessivo
• Y direção: sem cadeia de rolagem, mas permite feedback de deslizamento excessivo

Se a propriedade overscroll-behavior tiver um valor:

overscroll-behavior: contain;

• X e Y direções: sem cadeia de rolagem, mas permite feedback de deslizamento excessivo

Exemplo

Exemplo 1

Feche a cadeia de rolagem do elemento <div> ajustável:

#yellowDiv {
  overscroll-behavior: contain;
}

Experimente você mesmo

Exemplo 2: Sintaxe de dois valores:

Configure overscroll-behavior O valor da propriedade é configurado como auto nonePermite a cadeia de rolagem e o feedback de deslizamento excessivo na direção x, mas não permite na direção y:

#pinkDiv {
  overscroll-behavior: auto none;
}

Experimente você mesmo

Sintaxe do CSS

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

Valores de propriedade

Detalhes técnicos

Suporte do navegador

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

* No Microsoft Edge, o valor de propriedade 'none' é tratado como 'contain', o que é incorreto.

Páginas relacionadas

Referência：Propriedade CSS overscroll-behavior-x

Referência：Propriedade CSS overscroll-behavior-y

Referência：Propriedade CSS scroll-behavior

Referência：Propriedade CSS scroll-margin

Referência：A propriedade CSS scroll-padding

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