在页面加载或换行时顺风滚动到底部

Question

这是我正在构建的聊天应用程序。 CSS 应该发生的是 div 应该始终在底部显示最新消息。当有人输入新消息时，它应该向下滚动到底部以显示最新消息。现在它所做的只是 post 新消息，但不会滚动，并且在页面重新加载时，最旧的消息显示在顶部而不是底部的最新消息（您必须滚动才能看到它。

<div class="h-full pb-2 mb-2 pt-0 mt-0 shadow-md overflow-y-auto">
  <div class="flex flex-col-reverse justify-end">
    <div class="bg-white">
      <div>
        <div class="flex space-x-3 px-3">
          <img class="mt-4 h-8 w-8 rounded-full" src="http://localhost:8000/storage/profile-photos/GGsymBqzbfC6nOWHyFsBEwAdqJtICgo0DcypPlMR.jpg" alt="Ryan Olson">
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="pt-2 text-sm font-medium">Ryan Olson</h3>
              <p class="text-sm text-gray-500">9/2/2021, 12:12:49 PM</p>
            </div>
            <p class="text-md text-gray-500">this is a test</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-gray-100">
      <div>
        <div class="flex space-x-3 px-3">
          <img class="mt-4 h-8 w-8 rounded-full" src="http://localhost:8000/storage/profile-photos/GGsymBqzbfC6nOWHyFsBEwAdqJtICgo0DcypPlMR.jpg" alt="Ryan Olson">
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="pt-2 text-sm font-medium">Ryan Olson</h3>
              <p class="text-sm text-gray-500">9/2/2021, 12:09:34 PM</p>
            </div>
            <p class="text-md text-gray-500">testing</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white">
      <div>
        <div class="flex space-x-3 px-3">
          <img class="mt-4 h-8 w-8 rounded-full" src="http://localhost:8000/storage/profile-photos/GGsymBqzbfC6nOWHyFsBEwAdqJtICgo0DcypPlMR.jpg" alt="Ryan Olson">
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="pt-2 text-sm font-medium">Ryan Olson</h3>
              <p class="text-sm text-gray-500">9/1/2021, 12:46:38 AM</p>
            </div>
            <p class="text-md text-gray-500">fhfdgh</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-gray-100">
      <div>
        <div class="flex space-x-3 px-3">
          <img class="mt-4 h-8 w-8 rounded-full" src="http://localhost:8000/storage/profile-photos/GGsymBqzbfC6nOWHyFsBEwAdqJtICgo0DcypPlMR.jpg" alt="Ryan Olson">
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="pt-2 text-sm font-medium">Ryan Olson</h3>
              <p class="text-sm text-gray-500">9/1/2021, 12:45:38 AM</p>
            </div>
            <p class="text-md text-gray-500">https://localhost:8000</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white">
      <div>
        <div class="flex space-x-3 px-3">
          <img class="mt-4 h-8 w-8 rounded-full" src="http://localhost:8000/storage/profile-photos/GGsymBqzbfC6nOWHyFsBEwAdqJtICgo0DcypPlMR.jpg" alt="Ryan Olson">
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="pt-2 text-sm font-medium">Ryan Olson</h3>
              <p class="text-sm text-gray-500">9/1/2021, 12:39:47 AM</p>
            </div>
            <p class="text-md text-gray-500">How much does it tap into the web server</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-gray-100">
      <div>
        <div class="flex space-x-3 px-3">
          <img class="mt-4 h-8 w-8 rounded-full" src="http://localhost:8000/storage/profile-photos/GGsymBqzbfC6nOWHyFsBEwAdqJtICgo0DcypPlMR.jpg" alt="Ryan Olson">
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="pt-2 text-sm font-medium">Ryan Olson</h3>
              <p class="text-sm text-gray-500">9/1/2021, 12:39:34 AM</p>
            </div>
            <p class="text-md text-gray-500">I wonder how this works</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我只是不确定我错过了什么。

Answer 1

里面 <div class="flex flex-col-reverse justify-end"> 我还得放 h-full

在页面加载或换行时顺风滚动到底部

Tailwind scroll to bottom on page load or new line

css

flexbox

tailwind-css