While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden jumps. As I scroll down and more elements are rendered, the view should stay constant while the remaining content loads.
Below is an excerpt from my JavaScript file:
function loadMultipleElements(amountToLoad, url) {
var parentDiv = document.getElementById("instance");
for(var i = 0; i < amountToLoad; i++) {
var iframe = document.createElement('div')
iframe.innerHTML = '<iframe src=\"' + url + '\"></iframe>';
parentDiv.appendChild(iframe);
}
}
This is how I'm loading it in the HTML file using infinite scroll functionality from jQuery:
<script>
loadMultipleElements(5, "https://www.example.com");
$(window).scroll(function() {
if($(window).scrollTop() == ($(document).height()) - $(window).height()) {
loadMultipleElements(5, "https://www.example.com");
}
});
</script>
When I run this on my localhost, all elements render correctly upon opening but the screen initially jumps to the bottom for each new render, causing disruption. This issue is exacerbated by infinite scrolling as it triggers the jQuery function continuously due to the constant jumping to the bottom.
EDIT: I have also included a Plunker link, though I am currently unsure how to implement infinite scrolling with jQuery on Plunker. For now, there is a fixed load value of 10, which still results in the screen scrolling towards the bottom with each render.