13

我有带有垂直滚动条的 div。Div 正在通过 ajax 动态更新，并使用 jQuery 的 .html 方法插入 html。更新 div 后，滚动条返回顶部，我试图将其保持在以前的位置。

这就是我正在尝试的方式：

var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos
$.ajax({...
    success: function(data) {
        $('div#some_id').html(data.html_content); //insert html content
        $('div#some_id').scrollTop(scrollPos); //restore scroll pos
    }
});

这失败了。我最好的猜测是由于插入的 html 未呈现（即没有滚动）而失败。

例如，这有效。

setTimeout(function(){
    $('div#some_id').scrollTop(scrollPos);
}, 200);

但在我看来，这是肮脏的黑客行为。我无法知道某些浏览器不会花费超过这 200 毫秒来呈现插入的内容。

有没有办法在继续之前等待浏览器完成渲染插入的 html？

4

4 回答 4

9

它仍然是一个 hack，当 HTML 实际插入并准备好时，确实没有可用的回调，但是您可以检查其中的元素html_content是否每 200 毫秒插入一次，以确保它们真的准备好等。

从 ajax 调用检查 HTML 中的最后一个元素：

var timer = setInterval(function(){
   if ($("#lastElementFromAjaxID").length) {
       $('div#some_id').scrollTop(scrollPos);
       clearInterval(timer);
   }
}, 200);

对于更高级的选项，您可能可以在没有间隔的情况下执行类似的操作，并将其绑定到 DOMnodeInserted，并检查是否插入了最后一个元素。

于 2012-05-20T13:13:43.517 回答
4

我只想在这里指出一个区别：一件事是 .html() 完成加载时，但浏览器实际呈现的内容是不同的。如果加载的内容有些复杂，如表格、div、css 样式、图像等 - 渲染将在页面上出现的所有 dom ellements 之后完成。检查是否一切都在那里，并不意味着渲染完成。我一直在自己寻找答案，因为现在我使用 setTimeout 函数。

于 2013-05-23T12:02:09.463 回答
0

这样的回调不存在，因为.html()总是同步工作

于 2013-04-03T13:21:37.880 回答
0

如果您正在等待图像加载，有一种方法https://github.com/desandro/imagesloaded

于 2015-10-28T08:44:44.587 回答