jquery .load() 外部内容后无法滚动答案

【问题标题】：Unable to scroll after jquery .load() external contentjquery .load() 外部内容后无法滚动
【发布时间】：2012-08-24 08:40:36
【问题描述】：

我在尝试在 jQuery 加载后立即滚动浏览器窗口时遇到问题。内容加载正常，加载完成后调用的函数正在被调用。但是，如果我将超时设置为 300 毫秒，我只能让页面实际滚动：

frame.html("#box").load("loadedfile.php", function(){
   setTimeout(function() {
       $('html,body').animate({
          scrollTop: $("#framed").offset().top
          }, 750);
       },300);
    });

加载完成功能似乎在内容加载之后执行，但在浏览器能够滚动之前（因为承载脚本的页面最初的长度不足以激活滚动条）。

我的解决方法感觉草率，可能是。有没有更好的方法来处理这个？超时似乎不是处理此问题的可靠方法。

除了 .animate 之外，我还尝试过 window.scrollTo 以及 jQuery scrollTo 插件

【问题讨论】：

出于兴趣，您是否尝试将超时设置为 0？因为 JS 是单线程的，所以有时需要退出执行以允许 UI 更新（在这种情况下使用超时就可以了）。
这实际上对我今天有用。昨天一直把超时时间调低，设置成100ms还是不行。今天它现在可以同时使用 0 和 100。
...我刚刚重新启动，浏览器是否会延迟更新 UI？如果是这样，对于系统速度较慢的用户来说，这将是一个问题。
我认为简单地从你所在的函数返回就足以允许 UI 刷新，如果它愿意 - 延迟 0 并不意味着它会立即执行，只是它将“尽快”执行，这很可能是在其他事情完成之后。一般情况下，让其他事情也有一点延迟也没什么坏处，但我通常将其控制在 25-50 之间。

标签： javascript jquery dom scroll

【解决方案1】：

您可以使用 ajax 调用来加载外部页面，成功后您可以使用所有滚动动画。

$.ajax({
        url: 'loadedfile.php',
        dataType: "html",                 // <-- set dataType to "html"
        success: function(response) {
            $("#box").html(response).fadeIn(1000); // <-- added fadeIn()
        $('html,body').animate({
            scrollTop: $("#framed").offset().top
          }, 750);
        }
    })

希望它对你有用。如果没有，请提供链接以实际查看您的问题，以便解决问题。

【讨论】：

加载行为不一样？
... 或者是通过调用 fadeIn() 来允许 UI 的重点？
根据我的观察和实践，我发现 $ajax 更友好，并且有很好的选项来处理输出。下一个链接可以为您提供更多详细信息。 stackoverflow.com/questions/5250630/…
只是想为任何读者补充一点，在这种情况下，将超时设置为 0 也对我有用。

【解决方案2】：

这段代码对我有用

lastElementTop = $('#id').position().top;
scrollAmount = lastElementTop  +- something;
$('html,body').animate({scrollTop: scrollAmount},1000);

【讨论】：