2

I'm developing a portfolio page, the grid containing the images it's dynamic so on certain mobile phone when changing orientation some images will distort the Width*Height ratio and it will get fixed only refreshing the page. For solving this problem I decided to put a Javascript code (that I got from this site) that will refresh the page when the orientation changes.

The problem is that when the page reload from THAT code it will lose the scrolling position and return at the top of the page, it will mantain the scrolling position if I reload manually with CTRL+R or using the refresh button, so I'm guessing that the problem it's in how the javascript code reload the page. Can you help me mantaining the scrolling position after reloading the page when the orientation on mobile changes?

I'm a total noob with almost zero knowledge about javascript and PHP. I've tried searching on internet for a solution but i can't figure it out.

Thank you

<script type="text/javascript">  
    window.onorientationchange = function() { 
        var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; 
        } 
    };  
</script>
Nicholas Tower
  • 72,740
  • 7
  • 86
  • 98
ilario_seb
  • 23
  • 2
  • 1
    Check this solution: https://stackoverflow.com/questions/49856445/how-to-refresh-code-without-losing-scroll-position – IonV Aug 06 '19 at 08:18

1 Answers1

2

You can store the position in local storage and retrieve it on load. Because the page will change size, you'll need to store and retrieve the y coördinate relative to the height of the page.

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;

In order to prevent scrolling taking effect after navigating away, I've added the reoriented value to local storage so that if it's not true then scrolling won't happen.

Now, having chatted with you and tried this out, there is a further problem. On load the page does something weird that means we need to wait a second before scrolling, so I've added a setTimeout to compensate and that seems to be working.

(Thanks to How to get the height of the entire document?)

Matt Ellen
  • 11,268
  • 4
  • 68
  • 90
  • This did the trick, it does not store the exact same position but I that's because the height of the images changes turning the screen on landscape or portrait. Thank you very much – ilario_seb Aug 06 '19 at 08:49
  • You're welcome. Ah, ok. :D I didn't think about that. I'll try to come up with a potential solution, unless you want to post your own. – Matt Ellen Aug 06 '19 at 08:55
  • It now mantain the scroll position also when I change page, so if i go visit some other page and then come back it will bring me down on the page. How can we avoid that? – ilario_seb Aug 06 '19 at 08:55
  • You could put this JS in a separate file an only add the script tag for it on the portfolio page – Matt Ellen Aug 06 '19 at 08:58
  • @ilario_seb I have updated the code, let me know any bugs :D – Matt Ellen Aug 06 '19 at 09:19
  • Also, I came up with a better idea for the scrolling issue – Matt Ellen Aug 06 '19 at 09:46
  • I've putted the code in a separate .js file, it loads it correctly but when the page get reloaded I'm back at the top of it. I really appriciate your help, thank you EDIT: Actually it seesm some kind of random shifting trough the page, sometimes it reload to the top, sometimes at the bottom – ilario_seb Aug 06 '19 at 10:14
  • Is that even when only reorienting? – Matt Ellen Aug 06 '19 at 10:17
  • Sorry, there was a typo (`JSOn` not `JSON`), so that might have been the issue – Matt Ellen Aug 06 '19 at 10:19
  • It seems random, sometimes works and sometimes dont. Is it ok if i give the link to the page? Maybe I can DM it to you so you can check. – ilario_seb Aug 06 '19 at 10:22
  • yeah, you can ping me @MellenTheNerd on twitter if you like – Matt Ellen Aug 06 '19 at 10:24
  • I'm following you, i'm @ilario_seb. I changed the JSOn to JSON but it doesn't fix the issue – ilario_seb Aug 06 '19 at 10:28