overscroll-behavior é uma propriedade em CSS que controla o comportamento de um elemento quando ocorre a rolagem e o intervalo de rolagem excede seus limites. Este atributo é particularmente útil para melhorar a experiência do usuário, especialmente em dispositivos móveis. Este atributo pode ser usado para evitar o efeito "saltitante" padrão ou personalizar esse efeito quando o usuário tenta rolar um elemento que atingiu o limite de rolagem.
comportamento de rolagem: automático | não contém nenhum; /* Ou define separadamente para eixo X e eixo Y*/ overscroll-behavior-x: auto | não contém nenhum; overscroll-behavior-y: auto | não contém nenhum |
auto : valor padrão. O elemento usa seu comportamento de rolagem padrão. Na maioria dos navegadores, isso significa que a rolagem terá um efeito "saltitante" (ou seja, o conteúdo retornará ligeiramente após atingir o limite) ao exceder o intervalo de rolagem. contain : Impede a propagação da cadeia de rolagem. Se a rolagem ocorrer em um elemento especificado e o conteúdo do elemento tiver rolado fora dos limites, o evento scroll não será propagado para o elemento pai do elemento. Isso ajuda a criar áreas de rolagem independentes e evita conflitos de rolagem desnecessários. none : Impede qualquer comportamento padrão durante a rolagem, incluindo o efeito "saltitante". Isso significa que quando o usuário tentar rolar um elemento que atingiu seus limites, ele não verá nenhum efeito de rolagem ou animação.Digamos que você tenha uma página que contém uma área interna rolável (como uma lista ou galeria de imagens). Se você quiser que esta área interna pare quando rolada até a borda sem produzir o efeito "saltitante" padrão, você pode configurá-la assim:
.área de rolagem {
comportamento de rolagem: nenhum;
altura: 200px;
overflow-y: auto; /* Permitir rolagem do eixo Y*/
} Neste exemplo, a classe .scrollable-area é aplicada ao elemento onde você deseja controlar o comportamento de rolagem. Defina overscroll-behavior: none; para que, ao rolar para a parte superior ou inferior do elemento, não haja efeitos ou animações de rolagem adicionais.
Coisas a serem observadas
Nem todos os navegadores suportam o atributooverscroll-behavior . Portanto, são recomendados testes adequados quando se confia na funcionalidade desta propriedade. Alguns navegadores podem suportar overscroll-behavior-x e overscroll-behavior-y , permitindo controlar o comportamento de rolagem horizontal e vertical, respectivamente. No entanto, esse suporte também é limitado, portanto, também são necessários testes. Use esse atributo com cuidado ao projetar interfaces de usuário tendo em mente a acessibilidade e a experiência do usuário. Em alguns casos, o comportamento de rolagem padrão (como o efeito "saltitante") pode ser mais intuitivo e compreensível para os usuários.Isso conclui este artigo sobre o atributo overscroll-behavior em CSS Para obter mais informações sobre o atributo overscroll-behavior CSS, pesquise artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. .downcodes.com!