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

Question

Я пытаюсь нейтрализовать корректировку высоты элемента, которая выше смещения прокрутки, вычисляя разницу в высоте и затем обновляя текущую позицию прокрутки, чтобы учесть это.

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

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

// Setup
...
var myElement = ...
var oldHeight = ...
var scrollOffset = window.scrollY;
var newHeight = 100;
var diff = newHeight - oldHeight;

// Determine if we need to counteract new size
var adjustScroll = (absoluteOffset(myElement) < scrollOffset);

// Adjust size
myElement.style.height = newHeight+'px';

// Adjust scroll to counteract the new height                    
if (adjustScroll) window.scrollTo(0, scrollOffset+diff);

Я работаю с WebKit, особенно на iOS.

Answer 1

Вы можете использовать scrollIntoView с таймерами для имитации нескольких потоков.
Или вы можете сделать это внутри фрагмента документа заранее.

Answer 2

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

Пользователь Stackoverflow Джеймс Кайл создал это маленькое jsfiddle с помощью jQuery, который пытается максимально сохранить положение прокрутки при изменении размера страницы

var html = $('html'),
    H = html.outerHeight(true),
    S = $(window).scrollTop(),
    P = S/H;

$(window).scroll(function() {
    S = $(window).scrollTop();
    P = S/H;
});

$(window).resize(function() {
    H = html.outerHeight(true);
    $(window).scrollTop(P*H);
});

http://jsfiddle.net/JamesKyle/RmNap/

Вы можете попробовать использовать этот же код и вызвать событие «изменить размер» в html, когда изображение загружено, с помощью библиотеки jQuery, например imagesLoaded

Answer 3

для веб-набора вы можете использовать CSS-переходы / анимацию, чтобы сгладить это, но все равно звучит так, будто вы идете по неверному пути с самого начала.Я уверен, что все, что вы пытаетесь сделать, может быть решено исключительно с помощью CSS (может быть, с помощью какого-то очень минимального Javaqscript).Разместите пример своего HTML + CSS + JS.