A rolagem vertical e horizontal são formas de navegar em uma página da Web usando um mouse, um touchpad ou um dedo. A rolagem vertical é utilizada quando o conteúdo de um elemento excede a altura do contêiner. Enquanto a rolagem horizontal é usada quando o conteúdo dentro de um elemento excede a largura do contêiner. A rolagem vertical permite que os usuários movam a página da Web para cima e para baixo, enquanto a rolagem horizontal permite que a página se mova para a esquerda e para a direita. Tailwind CSS fornece classes utilitárias para habilitar a rolagem vertical e horizontal em páginas da web.
Este artigo exemplificará:
Como ativar a rolagem vertical no Tailwind?
Para habilitar a rolagem vertical no Tailwind, use o botão “ estouro-y-scroll ” classe utilitária com o elemento desejado no programa HTML. Ele permite a rolagem vertical e sempre mostra as barras de rolagem, a menos que o usuário tenha desativado as barras de rolagem “sempre visíveis” nas configurações do sistema.
Sintaxe
< elemento aula = 'overflow-y-scroll ...' > ... elemento >
Exemplo: Habilitando Rolagem Vertical
Neste exemplo, criaremos um flex container com alguns flex items em uma coluna e aplicaremos o “ estouro-y-scroll ” utilitário para ele:
< corpo >
< div aula = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div aula = 'bg-yellow-400 p-2 m-2' > 1 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 2 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 3 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 4 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 5 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
corpo >
Aqui, no pai
- “ flex ” é usada para ajustar os tamanhos do elemento filho com base no espaço disponível, criando um layout flexível.
- “ flex-col ” define a direção flexível do contêiner para uma coluna.
- “ estouro-y-scroll ” permite a rolagem vertical.
- “ bg-roxo-700 ” define a cor roxa para o fundo do contêiner.
- “ p-4 ” A classe define 4 unidades de preenchimento em todos os lados do contêiner.
- “ mx-14 ” aplica as 14 unidades de margem no eixo x do contêiner.
- “ mt-5 ” aplica as 5 unidades de margem ao topo do container.
- “ h-36 ” define a altura do contêiner para 36 unidades.
No filho
- “ bg-amarelo-400 ” define o plano de fundo dos itens da grade para amarelo.
- “ p-2 ” adiciona 3 unidades de preenchimento ao conteúdo dentro dos itens flexíveis.
- “ m-2 ” define a margem de 2 unidades para os itens flexíveis.
Saída
Na saída acima, pode-se ver que a rolagem vertical foi habilitada com sucesso.
Como ativar a rolagem horizontal no Tailwind?
Para ativar a rolagem horizontal no Tailwind, use o botão “ estouro-x-rolagem ” classe utilitária com o elemento específico no programa HTML. Ele permite a rolagem horizontal e sempre mostra as barras de rolagem, a menos que o usuário tenha desativado as barras de rolagem “sempre visíveis” nas configurações do sistema.
Sintaxe
< elemento aula = 'overflow-x-scroll ...' > ... elemento >
Exemplo: ativar a rolagem horizontal
Neste exemplo, criaremos um contêiner flexível com alguns itens flexíveis em uma linha e aplicaremos o “ estouro-x-rolagem ” utilitário para ele:
< corpo >< div aula = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div aula = 'bg-yellow-400 p-2 m-2' > 1 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 2 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 3 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 4 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 5 div >
< div aula = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
corpo >
Aqui no pai
Saída
A saída acima indica que a rolagem horizontal foi habilitada com sucesso.
Conclusão
Para ativar a rolagem vertical e horizontal no Tailwind, o “ estouro-y-scroll ' e ' estouro-x-rolagem ” classes utilitárias são usadas respectivamente. Esses utilitários são aplicados aos elementos desejados no programa HTML para permitir a rolagem vertical e horizontal e sempre mostrar as barras de rolagem. Este artigo demonstrou o método para habilitar a rolagem vertical e horizontal no Tailwind.