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

对于webkit，你可以使用CSS过渡/动画来平滑这一点，但它仍然听起来像你开始时的错误方式。我确信无论你想要做什么都可以用CSS完全解决（也许只有一些非常小的Javaqscript）。发布一个HTML + CSS + JS的例子。

Answer 2

您可以将scrollIntoView与计时器一起使用来模拟多个线程或者您可以事先在document fragment内完成。

Answer 3

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

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上触发'resize'事件

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

3 个答案: