提问人：coderDcoder 提问时间：8/21/2023 最后编辑：coderDcoder 更新时间：8/21/2023 访问量：115
如何使用顺风 css 将滚动条修复为始终位于底部？
How do I fix the scrollbar to always be at the bottom using tailwind css?
问：
我有以下带有 div 列表的 div。这些子 div 将成为聊天框的消息框。
<div class="scroll" id="display">
</div>
但是，显然，每当用户进入页面时，我都需要 scoller 自动位于底部，因为我想首先显示最新的对话。我怎么能做到这一点？谢谢，请在下面留下任何评论。
答：
1赞
Jayesh Cholkar
8/21/2023
#1
试试这个：
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>
如果你只想使用Tailwind CSS，你可以试试这个：
<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>
注意： You can adjust the h-96 class to control the height of your chat box.
评论
0赞
coderDcoder
8/21/2023
我似乎无法让它工作。你能再次重新检查你的代码吗？
0赞
Jayesh Cholkar
8/21/2023
您尝试哪种代码？JS还是只有顺风？
0赞
coderDcoder
8/21/2023
我都试过了。我还尝试将脚本放在 div 部分的上方和下方
0赞
Jayesh Cholkar
8/21/2023
您能否添加更多代码片段以更好地理解。
0赞
coderDcoder
8/21/2023
真的没什么可补充的，因为这基本上是我所有的代码。我想我也在 div 中设置了我的宽度和高度，但这并不那么重要。你能添加一个代码片段来表明你的代码确实有效吗？
评论