Scrolltop для div с изображением не прокручивается в верхней части изображения ⇐ Html

[Anonymous]

У меня есть кусок HTML, содержащий элемент где -то. Я хочу показать только часть и, возможно, какой -то контекст выше и ниже. Мой подход состоит в том, чтобы использовать с переполнением , установив соответствующую высоту для и прокрутки в соответствующее местоположение вертикально. Br /> < /code> может содержать изображения, которые выше текста, и в этом случае у меня возникают проблемы с получением правильного прокрутки. Это происходит в основном, если кэш браузера отключен.
В качестве простого примера предположим >. Для простоты предположим, что я хочу, чтобы мой новый переполнение имел высоту изображения и что я хочу прокрутить в верхнюю часть изображения, чтобы изображение вертикально заполняло . Я вычисляю верхнюю позицию изображения и прокручиваю его. Поэтому я ожидаю увидеть полное изображение, но вместо этого я вижу верхнюю часть .
Пример (jsfiddle); Откройте инструменты разработчика и отключите кэш браузера для воспроизведения !

Код: Выделить всё

const blueprintDiv = document.createElement("div");
blueprintDiv.style.cssText = "border: 1px solid; visibility: hidden;";
blueprintDiv.innerHTML = `
BEGIN
BB
[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

END1

END2
`;
document.body.appendChild(blueprintDiv);

const imgPromises = [Promise.resolve()];
const img = blueprintDiv.querySelector("img");
if (!img.complete) {
imgPromises.push(new Promise(resolve => { img.onload = img.onerror = resolve; }));
}

Promise.all(imgPromises).then(() => {
console.log("All images loaded.");
const newDiv = document.createElement("div");
newDiv.style.cssText = `border: 1px solid red; display: block; overflow: auto; height: ${img?.offsetHeight}px`;
for (const child of blueprintDiv.childNodes) {
newDiv.appendChild(child.cloneNode(true));
}

const insTop = blueprintDiv.querySelector("ins").offsetTop - blueprintDiv.offsetTop;
const imgTop = img.offsetTop - blueprintDiv.offsetTop;
const offsetTop = Math.min(insTop, imgTop);

document.body.textContent = "";
document.body.appendChild(newDiv);
newDiv.scrollTop = offsetTop;

console.log(`Direct ScrollTop: ${newDiv.scrollTop}; offsetTop: ${offsetTop}; insTop: ${insTop}; imgTop: ${imgTop}`);
setTimeout(() => {
console.log(`Delayed ScrollTop: ${newDiv.scrollTop}; offsetTop: ${offsetTop}; insTop: ${insTop}; imgTop: ${imgTop}`);
// newDiv.scrollTop = offsetTop; // Uncomment => correct scrolling
}, 100);
});

Код ожидает загрузки изображения, а затем создает мой новый .
Проблема: с кешем браузера Отключил, вместо того, чтобы прокручивать верхнюю часть изображения, он прокручивается до текста BB . Кроме того, вывод консоли: < /p>

Код: Выделить всё

"Direct ScrollTop: 52; offsetTop: 52; insTop: 148; imgTop: 52"
"Delayed ScrollTop: 147; offsetTop: 52; insTop: 148; imgTop: 52"

Итак, позиции кажутся правильными в первый раз: на 148, топ изображения выше на 52. Поэтому я установил Scrolltop на 52.
Но после короткой задержки браузер каким -то образом заканчивается, когда автоматически прокручивается до < /code> позиции 147 вместо того, чтобы оставаться в верхней части изображения на 52. < /p>
не расстроен второй Scrolltop решает проблему, но это кажется для меня взломом. Есть более чистый способ исправить это?

Подробнее здесь: https://stackoverflow.com/questions/794 ... -the-image