如何使用 tailwind css 修复滚动条始终位于底部

发布于08月21日

我有以下带有div列表的div.这些 children div将成为聊天框的消息框.

<div class="scroll" id="display">

</div>

然而，很明显，每当用户进入页面时，我都需要sColler自动显示在底部，因为我想首先显示最新的对话.我怎么能做到这一点呢？谢谢你，请在下面留下任何 comments .

推荐答案

Try this :个

const chatBox = document.getElementById('chatBox');

// Function to scroll the chat box to the bottom
function scrollToBottom() {
chatBox.scrollTop = chatBox.scrollHeight;
}

window.onload = scrollToBottom;


<div class="overflow-auto" id="chatBox">

</div>

If you want to only use Tailwind CSS you can try this :个

<div class="overflow-auto h-96 scroll-snap-y-container">
<!-- Empty element to push content down -->
<div class="flex h-0 w-0">.</div>

<!-- Your chat message divs will be appended here -->

<!-- Empty element to create space at the bottom -->
<div class="flex h-0 w-0">.</div>
</div>

Note :You can adjust the h-96 class to control the height of your chat box.