Skip to content

Instantly share code, notes, and snippets.

@AppLoidx

AppLoidx/First-part-solution.html

Created January 31, 2020 22:21
Show Gist options
  • Save AppLoidx/7181b5841ea25a48e524d9dad0f847e6 to your computer and use it in GitHub Desktop.
Save AppLoidx/7181b5841ea25a48e524d9dad0f847e6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
First-part-solution.html
<!DOCTYPE html>
<html>
<head>
<title>Solution</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
let contentDiv = document.getElementById('content');
let i = 35;
while (i > -1){
msg = document.getElementsByClassName('message')[0];
let newMessage = msg.cloneNode(true);
newMessage.innerHTML = newMessage.innerHTML + i;
contentDiv .appendChild(newMessage);
i = i - 1;
}
contentDiv.scrollTop = content.scrollHeight;
</script>
<script type="text/javascript"> // here is your function to load new messages
function loadNewMessages(){
let 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;
}
content.scrollTop = 100;
}
</script>
<script type="text/javascript">
// you have method loadNewMessages() for load new messages
// write code here ...
const content = document.getElementById('content');
content.addEventListener('scroll', function(){
if (content.scrollTop < 100){
loadNewMessages();
}
})
</script>
</body>
</html>
Raw
Second-part-solution.html
<!DOCTYPE html>
<html>
<head>
<title>Solution</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
let contentDiv = document.getElementById('content');
let i = 35;
while (i > -1){
msg = document.getElementsByClassName('message')[0];
let newMessage = msg.cloneNode(true);
newMessage.innerHTML = newMessage.innerHTML + i;
contentDiv .appendChild(newMessage);
i = i - 1;
}
contentDiv.scrollTop = content.scrollHeight;
</script>
<script type="text/javascript"> // here is your function to load new messages
function loadNewMessages(){
let 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;
}
content.scrollTop = 0;
}
</script>
<script type="text/javascript">
// you have method loadNewMessages() for load new messages
// write code here ...
const content = document.getElementById('content');
content.addEventListener('scroll', function(){
if (content.scrollTop < 100){
let oldScrollHeight = content.scrollHeight;
let oldScrollTop = content.scrollTop;
loadNewMessages();
content.scrollTop = oldScrollTop + (content.scrollHeight - oldScrollHeight)
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment