Scroll no final por padrão com CSS

26d atrás

Vamos aprender a deixar o scroll no fim de um container por padrão, com #CSS puro, o que pode ser útil para aplicações de mensagens, feeds etc.

Primeiro vamos adicionar o HTML básico, um container que vai ter scroll e alguns itens para preencher a tela.

<div class="scroll-bottom">
    <div>Item 10</div>
    <div>Item 9</div>
    <div>Item 8</div>
    <div>Item 7</div>
    <div>Item 6</div>
    <div>Item 5</div>
    <div>Item 4</div>
    <div>Item 3</div>
    <div>Item 2</div>
    <div>Item 1</div>
</div>

Agora o CSS para deixar o scroll no final:

.scroll-bottom {
    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
}

O grande truque está no uso das propriedades display: flex e flex-direction: column-reverse. Ao usar column-reverse em um container com scroll, ele irá para o final do conteúdo, inclusive se você adicionar mais itens.

Resultado

Veja o resultado abaixo:

Resultado

Comentários (0)