Este artigo demonstra o uso da propriedade CSS overflow-y com vários exemplos.
Como usar a propriedade Overflow-y em CSS?
O CSS “ estouro-y ” é utilizada para controlar o estouro do conteúdo ao longo do eixo cruzado dentro de um elemento. Ele especifica se deve cortar o conteúdo ou adicionar uma barra de rolagem quando o conteúdo exceder a altura do contêiner. Os valores possíveis para esta propriedade são “ visível ”, “ escondido ”, “ rolagem ', e ' auto ”.
Vamos visitar os exemplos abaixo para uma melhor demonstração da propriedade overflow-y:
Exemplo 1: usando Visível como um valor para a propriedade Overflow-y
O ' visível ” permite que o conteúdo transborde do contêiner e não adiciona nenhum recorte ou barra de rolagem. Visite o bloco de código prático abaixo:
>
>
>
A descrição do bloco de código acima:
- Primeiro, atribua um valor de “ pai ' para o ' aula ” e utilizar o atributo “ estilo ” atributo.
- Além disso, forneça o valor de “ visível ” para o CSS “ estouro-y ' propriedade. E defini-lo igual ao ' estilo ” para fazer o estilo CSS funcionar.
- Em seguida, crie um aninhado “ div ” elemento e atribua a ele uma classe de “ conteúdo infantil ”. Além disso, forneça dados fictícios a ele.
Agora, utilize as propriedades do CSS para aprimorar a visualização que ajuda no melhor entendimento da propriedade CSS overflow-y:
.pai {largura : 200px ;
altura : 150px ;
fronteira : 1px sólido preto ;
}
.childContent {
altura : 300px ;
cor de fundo : azul claro ;
}
A descrição das propriedades CSS é dada abaixo:
- Primeiro, o “ pai ” é selecionada e os valores de “ 200px ”, “ 150px ', e ' 1 px preto sólido ” são atribuídos ao CSS “ largura ”, “ altura ', e ' fronteira ” propriedades, respectivamente.
- Em seguida, selecione a opção “ conteúdo infantil ” e defina os valores de “ 300px ' e ' azul claro ” para o CSS “ altura ' e ' cor de fundo ” propriedades, respectivamente. Esta classe é estendida para o “ pai ” classe que é controlada pelo CSS “ transbordar ' propriedade.
Após a compilação dos trechos de código, a página da Web aparece assim:
O instantâneo exibe que o conteúdo de estouro agora está visível e a barra de rolagem ou recorte não é adicionado por padrão.
Exemplo 2: Usando Hidden como um valor para a propriedade Overflow-y
O ' estouro-y ” propriedade com um valor de “ escondido ” oculta todo o conteúdo que se move para fora de seu contêiner pai. Esta propriedade não adiciona barras de rolagem, em vez disso, recorta o conteúdo transbordado:
>
>
O trecho de código acima contém:
- Primeiro, o mesmo código é inserido novamente com um aumento de conteúdo fictício colocado dentro do elemento div interno.
- Em seguida, altere o valor do “ estouro-y ” propriedade para “ escondido ' para o ' ” tag tendo uma classe de “ pai ”.
Depois de renderizar novamente, a página da Web fica assim:
O instantâneo exibe que o conteúdo excedente foi cortado.
Exemplo 3: Usando Scroll como um valor para a propriedade Overflow-y
Definindo o valor de “ estouro-y ” propriedade para o “ rolagem ” permite que o usuário final percorra o
conteúdo que o transborda. Vamos visitar o bloco de código abaixo:
= 'pai' estilo = 'overflow-y: rolagem;' >
= 'criançaConteúdo' > Isso é apenas manequim contente utilizado para a demonstração da propriedade overflow-y quando está definido como visível. Isso é apenas manequim contente utilizado para a demonstração da propriedade overflow-y quando está definido como visível.
>
>No bloco de código acima:
- Primeiro, a mesma estrutura HTML foi inserida dentro do “
' marcação. - Em seguida, altere o valor do “ estouro-y ” propriedade para o “ rolagem ”. Isso permite que o “ pai ” div para habilitar o efeito de rolagem para controlar o conteúdo transbordado.
Após a compilação do bloco de código acima, a página da Web aparece assim:
O gid acima ilustra que o efeito de rolagem está disponível para controlar o conteúdo transbordado.
Exemplo 4: usando Auto como um valor para a propriedade Overflow-y
Neste exemplo, os usuários podem adicionar uma barra de rolagem somente se o conteúdo não couber no contêiner. Além disso, se o conteúdo não estourar, a barra de rolagem não será adicionada. É possível fornecendo o valor de “ auto ” para o CSS “ estouro-y ' propriedade:
= 'pai' estilo = 'overflow-y: automático;' >
= 'criançaConteúdo' > Isso é apenas manequim contente utilizado para a demonstração da propriedade overflow-y quando está definido como visível. Isso é apenas manequim contente utilizado para a demonstração da propriedade overflow-y quando está definido como visível.
>
>No bloco de código acima:
- Primeiro, insira o mesmo arquivo HTML dentro do “
' marcação. - Em seguida, atualize o valor do “ estouro-y ” propriedade para “ auto ”. Permite o efeito de rolagem em relação ao comprimento vertical do conteúdo.
Após o término do processo de compilação, a página da Web funciona assim:
O gif acima exibe a propriedade de estouro que habilitou a barra de rolagem de acordo com o comprimento do conteúdo.
Conclusão
O CSS “ estouro-y ” é utilizada para controlar o conteúdo transbordado ao longo do eixo cruzado dentro de um elemento. A propriedade overflow-y controla o conteúdo de acordo com o valor específico fornecido para as propriedades overflow-y. O ' visual ” valor exibe o conteúdo transbordado, o valor “ escondido ” O valor oculta o conteúdo de estouro e o valor “ rolagem ” adiciona uma barra de rolagem para controlar o conteúdo. E se o valor for “ auto ” a barra de rolagem adiciona ou remove de acordo com o tamanho do conteúdo.
- Primeiro, a mesma estrutura HTML foi inserida dentro do “