偏移量变化时的scrollTop

Question

我想滚动到我的应用程序中的特定目标--如下所示：

 var editor = self.$el.find(".editorWrapper[data-containerid=" + containerId + "]").closest('.containerWrapper');
 $('html, body').animate({
  scrollTop: editor.position().top-5
 }, 1000);

问题是，有些元素在向下滚动->时呈现，例如图像或iframe在滚动时呈现，我不知道新呈现元素的高度(很难获得高度--但也不是不可能)--滚动停止在错误的位置。是否有一种简单的方法可以平滑地滚动到一个元素，而偏移量/高度变化，然后保存每个“新呈现”元素的高度？

Answer 1

我只是向下滚动，直到它真正找到了具体的点。示例：

​

function ScrollTo(el) {
    if ($('html').scrollTop() < (el.position().top - 5)) {
        $('html').animate({
            scrollTop: $('html').scrollTop() + 1
        }, 1, 'swing', function() {
            ScrollTo(el);            
        });
    }
}
ScrollTo($('#scrollTo'));

div {
    width:400px;
}
#large {
    height:400px;
    background:red;
}
#scrollTo {
    height:400px;
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="large"></div>
<div id="scrollTo"></div>

​

你可以玩周围的设置，使它滚动在一个体面的速度，为你，等等。

Answer 2

要完全加载页面，可以调用脚本：

$(document).load(function () {
   var editor = self.$el.find(".editorWrapper[data-containerid=" + containerId + "]").closest('.containerWrapper');
   $('html, body').animate({
  scrollTop: editor.position().top-5
 }, 1000);
});

https://api.jquery.com/load-event/

Answer 3

滚动位置可能会在每次呈现图像/iframe时发生更改，因此最好的方法是将加载事件绑定到更新scrollTop位置的此类元素( image/iframe )。