时间戳

首页 > 解决方案 > HTML 样式，显示消息从底部开始，但不能滚动？

html - HTML 样式，显示消息从底部开始，但不能滚动？

问题描述

我想创建一个像微信这样的表面。所有消息都是从底部开始的，但是为什么它不能滚动？如果消息从顶部开始，它可以滚动..但我希望消息从底部开始..

如何改进我的脚本？谢谢。

     var childrens = document.querySelector("#chat").children.length;
     document.querySelector("#chat").childNodes[childrens-1].scrollIntoView() 
<div style="height: 100vh; background-position: top center; width: 100%; max-height: 1366px; position: relative;">
	<div style="height: 40px; background-color: black; color: white; line-height: 40px; position: fixed; top: 0px; width: 100%; z-index: 999" align="right">
		<div style="margin-right: 1em">menu</div>
	</div>
	<div style="bottom:0; background-color: white; color: white; line-height: 50px; position: fixed; width: 100%; height: 50px; z-index: 999; border-top: 1px solid #D3D3D3;" align="right">
		<div style="width: 100%">
			<div style="padding-left:1em; padding-right: 1em;" align="left"><input type="text" style="width: 90%;"><div style="float: right; border: 2px solid grey; height: 20px; margin-top: 0.5em; width: 20px; border-radius: 30px; color: grey; line-height: 20px; font-size: 1.5em;" align="center">+</div></div>
		</div>
	</div>
	<div style="background-color: transparent; color: white; position: absolute; width: 100%; height: 100%; overflow: auto;" align="right">
		<div style="padding-top: 40px; padding-right: 1em; padding-left: 1em; padding-bottom: 60px; position: absolute;">
			<div id="chat" style="width: 100%; color: black; padding-top: 1em; font-size: 12px;">
				<div>First message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Message here</div><div>Last message</div>
			</div>
		</div>
	</div>
</div>

标签： htmlcssscroll

解决方案

将 id "chat" 赋予所有消息的父 div 并使用此脚本 

 <script>
     var childrens = document.querySelector("#chat").children.length;
     document.querySelector("#chat").childNodes[childrens-1].scrollIntoView() 
 </script>

推荐阅读