HTML стиль, показывающий начало сообщения снизу, но не прокручивается? - PullRequest
Новая
       4

HTML стиль, показывающий начало сообщения снизу, но не прокручивается?

0 голосов
/ 28 мая 2020

Я хотел бы создать поверхность вроде wechat .. все сообщения начинаются снизу, но почему она не прокручивается? Если сообщение начиналось сверху, оно могло прокручиваться .. но я бы хотел, чтобы сообщение начиналось снизу ..

Как улучшить мой скрипт? Спасибо. 

     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>

1 Ответ

0 голосов
/ 28 мая 2020

Дайте id "chat" родительскому div для всех сообщений и используйте этот скрипт 

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