Question

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

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

问题是，有些元素在向下滚动时呈现 - ＆gt;例如当图像或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）。

偏移更改时的scrollTop

3 个答案: