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）。