javascript - 在 ajax 请求上保持滚动位置

Question

我有一个包含很多容器的单页网站。

每个容器的内容都是通过ajax加载的(异步，不是每个容器都同时填充数据)。

容器有一个动态高度(高度:自动)。

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

如何在加载其他容器时滚动到一个容器(例如容器 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);
            }
        }