Question

当我渲染元素并将它们附加到父div时，我的屏幕会在加载时跳到最底层的元素，而不是加载它们并使视图保持在当前视图中。所以在开始它应该在屏幕的顶部并且保持在那里而不是跳到底部并且当我向下滚动并且它呈现更多元素时它应该保持在那个位置，而其余的加载。

以下是我的js文件中的代码。

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);
    }
}

然后我如何使用来自jquery的无限滚动

将其加载到html文件中

<script>
    loadMultipleElements(5, "https://www.example.com");
        $(window).scroll(function() {
            if($(window).scrollTop() == ($(document).height()) - $(window).height()) {
                loadMultipleElements(5, "https://www.example.com");
            }
        });
</script>

因此，当我在我的本地主机上运行它时，它将在打开时呈现所有呈现，但跳转到屏幕底部以呈现它然后跳回到当前视图。这里的一个大问题是因为无限滚动以及它如何不断跳到底部它最终无限期地进行，因为它一直跳到底部触发jquery函数。

编辑：Plunker虽然不知道如何让jquery在此刻使用plunker进行无限滚动，所以现在只需要一个固定的加载值10.即使它已经滚动到底部，因为它渲染更多。

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

Answer 1

您的问题是由于当bing自动聚焦搜索栏时，您的浏览器会向下滚动到iframe，以便您输入文字。

（参见＆＃34;慢动作插图＆＃34; here.）

我所知道的唯一解决方法是使用iframe sandbox属性 - 仅限 HTML5！ - 以防止bing聚焦搜索栏。然后当iframe完成加载时，我们实现了JavaScript。 Example.

<小时/> 但是，这种方法存在一些问题。

由于它在加载iframe时禁用javascript，因此也会禁用所需的javascript功能。（即没有＆＃39;最近的故事＆＃39;）
感觉非常黑客。
我们尝试做的事情并不明显。

PS：以下是W3Schools has to say about the sandbox attribute以及walkthrough on html5rocks.

的内容

PPS：如果有人知道更好的方法，我会爱来听取它。

如何将子节点添加到父节点而不将视图跳转到正在加载元素的位置？

1 个答案: