AppLoidx/task.html

## task.html
<!DOCTYPE html>
<html>
<head>
	<title>Task</title>
	<style type="text/css">
		.old-message {
			background-color: grey;
		}
		.new-message {
			background-color: green;
		}
	</style>
</head>
<body>
	<div style="width: 200px; height: 400px; overflow-y: scroll;" id='content'>
		<div class="old-message message">Nyan Nyan</div>
	</div>


	<script type="text/javascript"> // just init method, don't see this
		const content = document.getElementById('content');
		let i = 35;
		while (i > -1){
			msg = document.getElementsByClassName('message')[0];
			let newMessage = msg.cloneNode(true);
			newMessage.innerHTML = newMessage.innerHTML + i;
			content.appendChild(newMessage);
			i = i - 1;
		}
		content.scrollTop = content.scrollHeight;
	</script>

	<script type="text/javascript">	// here is your function to load new messages
		function loadNewMessages(){
			const content = document.getElementById('content');
			let i = 0;	// you don't know real size of new messages
			while (i < Math.random() * (25 - 7) + 7){

				msg = document.getElementsByClassName('message')[0];
				let newMessage = msg.cloneNode(true);
				newMessage.classList.add('new-message');
				newMessage.innerHTML = "new message" + i;
				content.prepend(newMessage);
				i = i + 1;
			}
		}
	</script>

	<script type="text/javascript">
		// you have method loadNewMessages() for load new messages

		// write code here ...
	</script>
</body>
</html>

## task.md

      
    Raw
  

              task.md
            
          
    Задача

У вас есть div элемент с id = content. В нем хранятся сообщения чата.
При этом этот div имеет определенную высоту и скролл бар справа (можно считать что это маленькое окошко с возможностью скролла (overflow-y: scroll))
Дело в том, что в чате может быть очень много сообщений и загружать их все сразу нет необходимости.
Ваш босс приказал сделать ленивую загрузку сообщений таким образом:
Когда пользователь делает скролл вверх и до конца остается 100px необходимо загрузить новые сообщения.
Как это сделать, если у вас имеется функция на загрузку следующих сообщений?
2 часть

Оказалось, что при загрузке новых сообщений вас резко перемещает вверх (то есть перемещает на прежние 100px от начала)
Вашему боссу это не понравилось и он добавил:
Когда заружаются новые сообщения необходимо чтобы пользователь оставался на прежнем месте.

При этом вы не знаете сколько сообщений именно загрузится (возможно вы уже в конце чата)
	<!DOCTYPE html>
	<html>
	<head>
	<title>Task</title>
	<style type="text/css">
	.old-message {
	background-color: grey;
	}
	.new-message {
	background-color: green;
	}
	</style>
	</head>
	<body>
	<div style="width: 200px; height: 400px; overflow-y: scroll;" id='content'>
	<div class="old-message message">Nyan Nyan</div>
	</div>


	<script type="text/javascript"> // just init method, don't see this
	const content = document.getElementById('content');
	let i = 35;
	while (i > -1){
	msg = document.getElementsByClassName('message')[0];
	let newMessage = msg.cloneNode(true);
	newMessage.innerHTML = newMessage.innerHTML + i;
	content.appendChild(newMessage);
	i = i - 1;
	}
	content.scrollTop = content.scrollHeight;
	</script>

	<script type="text/javascript"> // here is your function to load new messages
	function loadNewMessages(){
	const content = document.getElementById('content');
	let i = 0; // you don't know real size of new messages
	while (i < Math.random() * (25 - 7) + 7){

	msg = document.getElementsByClassName('message')[0];
	let newMessage = msg.cloneNode(true);
	newMessage.classList.add('new-message');
	newMessage.innerHTML = "new message" + i;
	content.prepend(newMessage);
	i = i + 1;
	}
	}
	</script>

	<script type="text/javascript">
	// you have method loadNewMessages() for load new messages

	// write code here ...
	</script>
	</body>
	</html>