Obrácené posouvání chatovacích oken – pouze pomocí CSS

Při vytváření chatovacího rozhraní obvykle chcete, aby se nejnovější zpráva zobrazovala přesně tam, kam se přirozeně díváte – ve spodní části okna. Napíšete vtipnou odpověď, stisknete klávesu Enter a hop – je tam, aniž byste museli scrollovat dolů jako líný T-Rex honící motýla. 🦖💬

Obvyklý problém

Zobrazit zprávy ve spodní části není příliš obtížné – stačí je jednoduše připojit ke kontejneru. Ale tady je skutečný problém:

Pokud počet zpráv přesáhne výšku chatovacího okna, obsah se přeteče a objeví se posuvník. Normálně prohlížeč začne posouvat odshora, což znamená, že po každé odeslané nebo přijaté zprávě musíte ručně posouvat dolů, abyste viděli tu nejnovější.

Vývojáři tento problém často řeší pomocí JavaScriptu, který při každém přidání nové zprávy vynutí pozici posuvníku na scrollTop = scrollHeight. To funguje, ale jedná se o zbytečný kód navíc a JavaScript by neměl být vždy hrdinou, když situaci může zachránit CSS.

CSS trik schválený Dinoušem 🦖✨

Zde je návod, jak dosáhnout zarovnání obsahu dolů a udržet posuvník „přilepený“ na spodní části – bez napsání jediného řádku JavaScriptu.

1. Obrátit pořadí zpráv
   Místo skládání zpráv shora dolů umístěte nejnovější zprávu na začátek v pořadí HTML.
2. Změnit kontejner na Flexbox
   Použijte display: flex na kontejner chatu, abyste mohli ovládat směr rozložení.
3. Použijte flex-direction: column-reverse
   Toto je kouzelný trik. Obrácením směru sloupce prohlížeč vizuálně umístí nejnovější zprávu na spodní část, zatímco posuvník zůstane přirozeně „přilepený“ na místě, když se objeví nový obsah.

<div style="display: flex; flex-direction: column-reverse;">
    <div>Nejnovější zpráva</div>
    <div>Dřívější zpráva</div>
    <div>Nejstarší zpráva</div>
</div> 

To je vše. Žádné JS scroll hacky. Žádné další posluchače událostí. Jen čisté, jednoduché CSS.

Prohlížeče vykreslují flex položky od „hlavního začátku“ do „hlavního konce“ flex kontejneru. Překlopením flex-direction na column-reverse se vizuální začátek stane spodní částí kontejneru. To znamená, že se také obrácí chování pozice posuvníku – přesně tak, jak chcete, aby se chovalo okno chatu.