O atributo overflow pode controlar o estouro do conteúdo, ocultar a parte em excesso na área correspondente ou adicionar uma barra de rolagem.
As propriedades do estouro:
| visível | Padrões. O conteúdo não será recortado e será renderizado fora da caixa do elemento. |
| escondido | O conteúdo é cortado e o restante do conteúdo fica invisível. |
| rolagem | O conteúdo é cortado, mas o navegador exibe barras de rolagem para visualizar o restante do conteúdo. |
| auto | Se o conteúdo for cortado, o navegador exibirá barras de rolagem para visualizar o restante do conteúdo. |
| você herda | Especifica que o valor do atributo de estouro deve ser herdado do elemento pai. |
Configurações adaptáveis para o eixo x: overflow-x:auto;
Configurações ocultas para o eixo y: overflow-y:hidden;
HTML da página:
<div class="box"></div>
Estilo CSS da página: (largura e altura devem ser definidas, caso contrário não terá efeito e não ocorrerá estouro)
.box{ largura: 500px; altura: 500px; estouro: rolagem;
borda: 1px rosa sólido;
}
Quando a barra de rolagem for exibida verticalmente, oculte o estilo da barra de rolagem:
// O pequeno quadrado na barra de rolagem
.box::-webkit-scrollbar-thumb { border-radius: 3px; cor de fundo: cinza; }
//O estilo geral da barra de rolagem.box::-webkit-scrollbar
{ width: 5px; height: 5px; //A altura e a largura correspondem ao tamanho das barras de rolagem horizontal e vertical } //A parte central da scrollbar.box::-webkit-scrollbar- track { background-color:pink; }
Você pode modificar o estilo desejado da barra de rolagem acima de acordo com suas próprias necessidades.