在 JavaScript 中调整窗口滚动位置以抵消上面元素的大小调整答案

【问题标题】：Adjusting window scroll position in JavaScript to counteract element's resizing above在 JavaScript 中调整窗口滚动位置以抵消上面元素的大小调整
【发布时间】：2011-10-15 04:59:59
【问题描述】：

我正在尝试通过计算高度差，然后更新当前滚动位置来解决对滚动偏移上方元素高度的调整。

问题是我无法阻止一个非常快速闪烁的伪影。无论我是先调整元素的高度，然后再调整滚动位置，还是反过来，我似乎都无法阻止快速的视觉跳跃。

有谁知道如何克服这个问题？我希望这些操作同时发生，中间没有渲染，但我不确定这是否可能。

// 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 上。

【问题讨论】：

我不确定是否有任何方法可以阻止闪烁的发生，因为您没有说明在页面上的哪个位置添加此元素，但如果您动画高度变化它不会比 2 次快速位置变化更让用户吃惊
如所述，正在调整高度的元素“高于滚动偏移”。该元素始终存在，但它的高度变化看不见，我试图抵消由此引起的页面高度和滚动位置的变化。
是的，它可能总是会有点偏离，但就像我说的，如果你为它制作动画，它会提供更好的用户体验。然后至少用户会知道发生了什么，而不必停下来思考他们在页面上的位置
动画看起来很奇怪。页面从特定的滚动位置开始，并且应该停留在那里。但是，该滚动位置上方的图像最终会加载，这会将正在查看的内容推到下方，因此无法查看。我正在尝试在调整图像大小后立即检测图像加载并重置滚动位置。动画只会导致滚动位置的来回平滑或晃动。如果可能的话，我正在尝试从中删除所有视觉伪影 - 因此问题！

标签： javascript html css dom webkit

【解决方案1】：

很抱歉在这里恢复旧帖子，但我遇到了这个问题，正在寻找与浏览器调整大小有关的类似问题的解决方案。

Stackoverflow 用户 James Kyle 使用 jQuery 创建了这个小 jsfiddle，它试图在调整页面大小时尽可能保持滚动位置

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/

您可以尝试使用相同的代码，并在使用像 imagesLoaded 这样的 jQuery 库加载图像时触发 html 上的“调整大小”事件。

【讨论】：

【解决方案2】：

您可以使用 scrollIntoView 和计时器来模拟多个线程。
或者您可以事先在 document fragment 内进行。

【讨论】：

感谢您的建议。我将尝试使用scrollIntoView 并测试将文档片段插入到 DOM 中。干杯！
@michael 如果这能解决您的问题，请记得稍后接受这个答案。

【解决方案3】：

对于 webkit，您可以使用 CSS 过渡/动画来平滑这一点，但听起来您一开始就走错了路。我确信无论你想要做什么都可以完全用 CSS 来解决（也许用一些非常小的 Javascript）。贴一个 HTML + CSS + JS 的例子。

【讨论】：

我不太确定你是否理解这个问题。我将重申我在上面的评论中所说的话。页面从特定的滚动位置开始，并且应该停留在那里。但是，该滚动位置上方的图像最终会加载，这会将正在查看的任何内容推下并移出视图。我正在尝试在调整图像大小后立即检测图像加载并重置滚动位置。
为什么不加载隐藏容器中的图像或隐藏溢出，当它们完成时（听 onload）你可以显示它们并使用滚动值移动内容。您也可以将内容设置为绝对位置，然后在图像存在后将其更改为相对位置。 Kindo hacky，但听起来你无论如何都会有某种疯狂的解决方案