How to add child nodes to parent nodes without having view jump to where element is being loaded?

Question

As I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom most element as it is being loaded rather than loading them and having the view stay at the current view. So at the beginning it should be at the top of the screen and stay there instead of jumping to the bottom and as I scroll down and it renders more elements it should stay at that spot as well whilst the rest loads.

Here is the code of what is essentially in my js 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);
    }
}

Then how I'm loading it in the html file with infinite scroll 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>

So when I run this on my localhost it will have everything render as it opens but jump to the bottom of the screen to render it then jump back to the current view. The big problem here is because of infinite scroll and how it keeps jumping to the bottom it ends up going indefinitely because it keeps jumping to the bottom triggering the jquery function.

EDIT: Plunker included though not sure how to get jquery to do infinite scrolling with plunker at the moment so right now just have a fixed load value of 10. Even already it is scrolling to the bottom as it renders more.

http://plnkr.co/edit/fUrJek3RAicHG98lUrC9?p=preview

Answer 1

Your problem is caused by the fact that when bing automatically focuses the search bar, your browser scrolls down to the iframe so that you can type in text.

(See a "slow-mo illustration" here. )

The only workaround I know of is to use the iframe sandbox attribute - HTML5 only! - to prevent bing from focusing the searchbar. Then when the iframe is finished loading, we reallow JavaScript. Example.

---

There are, however, a couple of problems with this approach.

• Since it works by disabling javascript when the iframe is loading, desired javascript functionality is also disabled. (ie. no 'recent stories')

• It feels incredibly hacky.

• It isn't obvious what we're trying to do.

---

PS: Here's what W3Schools has to say about the sandbox attribute and here's a walkthrough on html5rocks.

PPS: If anyone knows of a better way to do this, I'd love to hear it.