Как получить высоту от топа до элемента, если перед ним есть динамически подгружаемые элементы?

Question

[fisherspoons]

Есть обычный блок с id, нужно к нему пролистнуть с анимацией, простенькой функцией снизу

function scrollTo(hashUrl){
        hashUrl = hashUrl.hash;
        var id  = hashUrl,
            top = $(id).offset().top;
        $("body,html").animate({scrollTop: top}, 1500);
    }

Проблема в том что между этим элементом и верхом окна есть контент, в частности изображения которые подгружаются ленивой загрузкой и соответсвенно не имеют сразу высоту, из-за этого в момент прокрутки в переменной лежит не совсем корректный размер от верха.
Кто может сталкивался или есть догадки буду весьма признателен

Comments

[Алексей]

Что мешает кинуть якорь на элемент и до него скролить без расчета высоты?

[2cha.headz]

попробуйте после выполнения анимации сравнить значение переменной top c текущим значением $(id).offset().top, если не совпадают, то снова запускайте scrollTo, только аккуратнее, чтобы бесконечная рекурсия не получилась), правда так может не совсем плавный скролл получиться

[fisherspoons]

Алексей, проблемы нету, хотелось сделать с анимацией

[fisherspoons]

Дмитрий Глаголев, так более менее, правда останавливается и потом снова докручивает. Спасибо

Answer 1

[Vitaliy Orlov]

Столкнулся с похожей проблемой, вот мой вопрос: Как вернуться в позицию элемента, после добавлении новых элементов выше него (scrollTo после prepend)? . Я пришел к тому, что надо к каждому изображению хранить размеры и до загрузки изображений, вставлять враппер в размер изображений.

Другой вариант, это после выполнения animate проверять, не сдвинулась ли позиция скролла и если сдвинулась запускать его повторно. Вот код из моего примера:

...
    let scroller = ()=>{
      $('html,body').animate({
        scrollTop: firstFeedItem.offset().top
      }, 300, ()=>{
      	if (~~$(window).scrollTop() < ~~(firstFeedItem.offset().top)) {
        	scroller();
        }
      });
    };
    
    scroller();
...

в целом будет работать, но могут быть и проблемы, если например одно из изображений задержится более чем на пару секунд, в этом случае надо смотреть по ситуации, насколько это критично..