Tailwind Overscroll: o que você precisa saber
Neste artigo, examinaremos mais de perto os comportamentos de rolagem do Tailwind e exploraremos como ele pode ser aplicado para aprimorar a experiência do usuário em seu site.
Ele permite que você gerencie o comportamento do conteúdo quando ele é rolado além da borda de um elemento .
Em páginas com várias áreas de rolagem, essa propriedade pode ser usada para evitar rolagem indesejada.
O que é o Tailwind Overscroll?
Antes de nos aprofundarmos em como funciona o overscroll do Tailwind, é importante entender o que é o comportamento do overscroll e por que ele é importante.
Quando você rola para a parte superior ou inferior de uma página da Web, seu navegador geralmente continua rolando, mesmo quando você atinge o final do conteúdo – isso é chamado de overscrolling.
O comportamento de overscroll refere-se a como o navegador lida com esse comportamento quando ele ocorre.
O comportamento de overscroll padrão para a maioria dos navegadores é retornar quando o usuário chega ao final do conteúdo. Isso pode ser frustrante para os usuários, pois interrompe a experiência de rolagem e pode dificultar a navegação pelo conteúdo.
No entanto, existem alguns tipos diferentes de overscroll que podem ser usados para aprimorar a experiência do usuário e tornar a rolagem mais natural e intuitiva.
Classes de comportamento do Tailwind Overscroll
Tailwind CSS inclui várias classes de comportamento de overscroll.
Essas classes podem ser usadas em qualquer elemento que tenha conteúdo de estouro, como um contêiner rolável ou um layout de página inteira.
Aqui está uma lista das classes de comportamento de overscroll do Tailwind:
| Aulas | Visão geral |
| overscroll-auto | Essa classe aplica o comportamento padrão do navegador quando o usuário faz a rolagem. |
| overscroll-contain | A classe overscroll-contain no Tailwind CSS é usada para conter o comportamento de rolagem dentro dos limites de um elemento. |
| overscroll-nenhuma | Essa classe é usada para impedir o encadeamento de rolagem em todos os elementos e para desabilitar o comportamento padrão de estouro de rolagem. |
| overscroll-y-auto | Usando esta classe, o comportamento de rolagem vertical em um elemento é habilitado enquanto o comportamento de rolagem horizontal é desabilitado. |
| overscroll-y-contain | Usado para conter o comportamento de rolagem vertical dentro dos limites de um elemento enquanto permite a rolagem horizontal. |
| overscroll-y-none | A rolagem vertical pode ser desativada usando esta classe |
| overscroll-x-auto | Ele permite o overscrolling horizontal em um elemento enquanto evita o overscrolling vertical. |
| overscroll-x-contain | Usando esta classe, podemos habilitar a rolagem horizontal em um elemento enquanto desabilitamos a rolagem vertical. |
| overscroll-x-none | Permite desativar completamente a rolagem horizontal. |
Cada uma dessas classes pode ser usada para controlar como o conteúdo rola em diferentes direções e sob diferentes condições.
Por exemplo, a classe overscroll-y-auto permite que a rolagem vertical continue além do final do conteúdo, enquanto a classe overscroll-y-none desativa completamente a rolagem vertical.
Overscroll-Auto
No Tailwind CSS, a classe overscroll-auto especifica o comportamento padrão do navegador quando o usuário faz overscroll.
Ao usar esse recurso, o navegador pode determinar o comportamento com base no conteúdo exibido.
Sintaxe
<element class="overscroll-auto">...</element>
Para aplicar o Tailwind overscroll-auto , basta adicioná-lo ao elemento que deseja controlar.
Este exemplo demonstra a classe overscroll-auto no Tailwind:
Example:
Overscroll-Contain
Com a classe overscroll-contain do Tailwind, você pode limitar o comportamento de overscroll dentro dos limites de um elemento, evitando que ele afete o elemento pai ou a janela do navegador.
Isso significa que o efeito de rolagem será aplicado apenas ao conteúdo dentro do elemento e não à página inteira.
Sintaxe
<element class="overscroll-contain">...</element>
O exemplo a seguir ilustra a classe overscroll-contain no Tailwind:
Example:
Overscroll-Nenhum:
A classe overscroll-none no Tailwind CSS é usada para desabilitar completamente o comportamento de rolagem, impedindo qualquer rolagem além dos limites de um elemento.
Sintaxe
<element class="overscroll-none">...</element>
O exemplo abaixo fornece um breve resumo da classe overscroll-none no Tailwind:
Example:
Overscroll-y-Auto
A classe CSS Tailwind overscroll-y-auto é usada para habilitar o comportamento de rolagem vertical em um elemento enquanto desabilita o comportamento de rolagem horizontal.
Sintaxe
<element class="overscroll-y-auto">...</element>
Neste exemplo, a classe overscroll-y-auto é demonstrada:
Example:
Overscroll-y-Contain
O propósito desta classe é conter o overscrolling vertical dentro de um elemento enquanto também permite o overscrolling horizontal.
Sintaxe
<element class="overscroll-y-contain">...</element>
Para este exemplo, vamos considerar a implementação da classe overscroll-y-contain no Tailwind:
Example:
Overscroll-y-None
Sintaxe
<element class="overscroll-y-none">...</element>
Example:
Overscroll-x-Auto
Sintaxe
<element class="overscroll-x-auto">...</element>
Example:
Overscroll-x-Contain
Sintaxe
<element class="overscroll-x-contain">...</element>
Example:
Tailwind Overscroll-x-None
Sintaxe
<element class="overscroll-x-none">...</element>
