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

发布于 2024-11-26 22:50:54 字数 668 浏览 2 评论 0原文

我试图通过计算高度差然后更新当前滚动位置来解释它，从而抵消对滚动偏移上方元素高度的调整。

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

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

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

原文

I'm trying to counteract an adjustment to the height of an element which is above the scroll offset by calculating the difference in height and then updating the current scroll position to account for it.

The problem is that there's no way that I can prevent a very quick flickering artefact. Whether I adjust the element's height and then the scroll position, or vice versa, I can't seem to prevent a quick visual jump.

Does anyone know how this could be overcome? I want these to operations to happen at the same time with no rendering in-between but I'm not sure if it's possible.

// 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);

I'm working with WebKit, specifically on iOS.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回眸一遍 2024-12-03 22:50:54

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

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/

您可以尝试使用相同的代码，并在使用 jQuery 库（如图片已加载

Sorry to be reviving an old post here, but i came across this looking for a solution to a similar problem to do with browser resizing.

Stackoverflow user James Kyle created this little jsfiddle using jQuery that attempts to maintain scroll position as best as possible when a page is resized

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/

you could try using this same code and trigger a 'resize' event on the html when the image has loaded by using a jQuery library like imagesLoaded

回复收藏 0 原文