简而言之:
在iOS Safari中,如果从orientationchange事件处理程序调用window.scrollTo方法,则不会有任何作用。在方向改变后,似乎必须经过一定的时间(500-1000毫秒)才能修改滚动位置。
是否有解决方法可以立即更改滚动位置并避免用户在方向更改后短暂地看到旧的滚动位置的问题?
详细的问题描述:
我需要为移动浏览器实现以下功能:
当用户切换到横屏模式时,他应该看到全屏视频。当他切换回竖屏时,应恢复到离开时的确切位置。
第二部分是问题所在。仅当您不滚动屏幕且不对DOM进行任何调整时,iOS和Android才会保留滚动位置。因此,如果您只是从纵向切换到横向然后返回,一切都如预期的那样。如果您从纵向切换到横向,即使只调整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);
}
});
这个在安卓系统上可以工作,但是在iOS系统上不行。问题在于,在方向改变之后的一段时间内,window.scrollTo似乎根本没有起到任何效果。
因此,如果我改变
window.scrollTo(0, savedScrollPosition);
为了
setTimeout(function() {
window.scrollTo(0, savedScrollPosition);
}, 1000);
这个功能在iOS上可以正常使用,但用户会在短暂的时间里看到页面的错误部分,这导致用户体验较差。
我希望有人知道一种方法,在方向改变事件后立即更改iOS上的滚动位置。
谢谢。