javascript - 在 iOS Safari 上，window.scrollTo 在方向更改后不起作用

Question

简而言之:

在 iOS Safari 中，如果从 orientationchange 事件处理程序调用，window.scrollTo 方法不会执行任何操作。似乎必须经过一定的时间(500-1000 毫秒)才能在方向更改后修改滚动位置。

是否有一种解决方法可以立即更改滚动位置并避免在方向更改后用户可以暂时看到旧滚动位置的问题？

详细问题描述:

我需要为移动浏览器实现以下功能:

当用户切换到横向模式时，他应该看到全屏视频。当他切换回纵向时，他应该回到他离开的地方。

第二部分是问题。如果您来回切换方向，iOS 和 Android 都会保持滚动位置，但前提是您不滚动屏幕并且不对 DOM 进行任何调整。因此，如果您只是从纵向切换到横向并返回，一切都会按预期进行。如果您从纵向切换到横向，将滚动位置调整 1 个像素或对 DOM 进行任何更改，您将返回到不同的滚动位置。

所以我试图在用户返回纵向时务实地恢复滚动位置。这是我使用的简化代码:

    var scrollPosition;
    var savedScrollPosition;

    window.addEventListener('scroll', function() {
        scrollPosition = window.scrollY;
    });

    window.addEventListener('orientationchange', function(event) {
        if (Math.abs(window.orientation) === 90) {
            // This line will correctly save last scroll position for portrait orientation
            savedScrollPosition = scrollPosition;
        } else {
            // This line will correctly try to restore previously saved scroll position
            window.scrollTo(0, savedScrollPosition);
        }
    });

这适用于 Android，但不适用于 iOS。问题是，window.scrollTo 在方向更改过去后的特定时间之前似乎什么都不做。

如果我改变

window.scrollTo(0, savedScrollPosition);

到

setTimeout(function() {
    window.scrollTo(0, savedScrollPosition);
}, 1000);

它可以在 iOS 上运行，但用户可能会暂时看到页面的错误部分，这会导致糟糕的用户体验。

我希望有人知道在 orientationchage 事件后立即更改 iOS 滚动位置的方法。

谢谢。

Answer 1

最后，我被迫使用以下代码:

var scrollPosition;
var savedScrollPosition;

window.addEventListener('scroll', function() {
    scrollPosition = window.scrollY;
});

window.addEventListener('orientationchange', function(event) {
    if (Math.abs(window.orientation) === 90) {
        savedScrollPosition = scrollPosition;
    } else {
        if (isIOS()) {
            var retryScroll = setInterval(function () {
                if (window.scrollX === 0 && window.scrollY == savedScrollPosition) {
                    clearInterval(retryScroll);
                } else {
                    window.scrollTo(0, savedScrollPosition);
                }
            }, 10 );
        } else {
            window.scrollTo(0, savedScrollPosition);
        }
    }
});

用户会看到一个小的视觉故障，但这仍然是最好的解决方案。