javascript - 当移动方向发生变化时，如何在强制重新加载页面后保持滚动位置？

Question

我正在开发一个投资组合页面，包含图像的网格是动态的，因此在某些手机上，当改变方向时，一些图像会扭曲宽度*高度比，并且它只会在刷新页面时得到修复。为了解决这个问题，我决定放置一个 Javascript 代码(我从这个站点获得的)，当方向改变时，它会刷新页面。

问题是，当页面从该代码重新加载时，它将失去滚动位置并返回到页面顶部，如果我使用 CTRL+R 或使用刷新按钮手动重新加载，它将保持滚动位置，所以我猜问题在于 javascript 代码如何重新加载页面。当移动方向发生变化时，您能帮我在重新加载页面后保持滚动位置吗？

我是个菜鸟，对 JavaScript 和 PHP 的了解几乎为零。我尝试在互联网上搜索解决方案，但我无法弄清楚。

谢谢

<script type="text/javascript">  
    window.onorientationchange = function() { 
        var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; 
        } 
    };  
</script>

Answer 1

您可以将位置存储在本地存储中并在加载时检索它。因为页面会改变大小，所以您需要存储和检索相对于页面高度的 y 坐标。

var height = 0;
window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:                
            case 90:
            case -90: 
            localStorage.setItem('scrollTo', JSON.stringify({x:scrollX / innerWidth, y:scrollY / height}));
            localStorage.setItem('reoriented', true);
            window.location.reload();
            break; } 
};  

function scroller() {
    const body = document.body;
    const html = document.documentElement;

    height = Math.max( body.scrollHeight, body.offsetHeight, 
                           html.clientHeight, html.scrollHeight, html.offsetHeight );

    let strScrollTo = localStorage.getItem('scrollTo');
    let strReoriented = localStorage.getItem('reoriented');

    if(strScrollTo != null)
    {
       let reoriented = JSON.parse(strReoriented);
       if(reoriented === true)
    {
        setTimeout(function()
               {
               let scrollTo = JSON.parse(strScrollTo);
               window.scrollTo(scrollTo.x*innerWidth, scrollTo.y*height);
               localStorage.setItem('reoriented', false);
               }, 1000);
       }
    }
}

window.onload = scroller;

为了防止滚动在离开后生效，我将 reoriented 值添加到本地存储，这样如果它不是 true 则不会发生滚动。

现在，在与您交谈并尝试了这一点之后，还有一个问题。在加载页面时，页面会发生一些奇怪的事情，这意味着我们需要在滚动之前等待一秒钟，所以我添加了一个 setTimeout 来补偿，这似乎有效。

(感谢How to get the height of the entire document?)