在ajax请求上保持滚动位置

Question

我有一个单页网站，里面有很多容器。

每个容器的内容都是通过 ajax 加载的（异步，意味着不是每个容器都同时填充数据）。

容器有一个动态高度（高度：自动）。

网站由智能路由系统控制（如果您输入特定的网址，网站会在加载时滚动到给定的元素）。

如何滚动到一个容器（例如容器 5）并将此容器保持在相同的滚动位置（应该可以通过用户滚动更改）同时加载其他容器？如果容器具有固定的高度，则整个工作都不会出现任何问题，但此时，滚动位置会在每次装载或更改任何这些容器时发生变化。

你知道解决这个问题的插件或好方法吗？

问题示例：http://jsfiddle.net/b6sno9cv/

// Global variable to define start-container:
var initialWidgetIdx = 10;

预期结果：

滚动到容器 10 并停留在那里（滚动位置在这个容器上），即使其他容器没有完全加载。

（一旦每个容器都被加载（现在已经固定高度），滚动工作没有任何问题）

Answer 1

您可以使用offsetHeight 来获取元素的高度。在您的情况下，您可以在 ajax 请求中检查 div 的高度，然后使用 scrollBy，像这样

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState != 4) return
        if (xmlhttp.status == 200) {
            //do some stuff you need

            var scroll_value = document.getElementById('div_that_loaded').offsetHeight();
            window.scrollBy(0,scroll_value);
            }
        }