How to make Google Chrome and iOS remember scroll position in div after returning back?

Question

The problem is that the scroll container is a div, not body. And that causes Google Chrome and iOS to fail to remember scroll position of the div after users go to another page and then return back.

The related CSS code is as follows. The scroll container is #container.

* {
    margin: 0;
    padding: 0;
    }

html {
    height: 100%;
    }

body {
    height: 100%;
    overflow: hidden;
    }

#container {
    height: 100%;
    overflow: auto;
    }

And here is a demo on jsFiddle. Please reproduce the issue on Google Chrome and iOS by scrolling the content to about 50% (or any other noticeable length), click on a hyperlink to go to nother page, and then click browser's Back button.

Is there a uncomplicated way to make Google Chrome and iOS remember scroll position like Firefox does?

== EDIT in response to an answer ==

A simple .html file to test if any code in onbeforeunload works.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script>
        window.onbeforeunload = function () {
            alert('Are you sure');
        }
    </script>
</head>
<body>
    <div id="container">
        <p><strong><a href="http://stackoverflow.com/">Go to Stack Overflow</a></strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet imperdiet diam, in sodales velit porta eget.</p>
    </div>
</body>
</html>

Muhammad Umer · Accepted Answer · 2015-06-20T17:49:14.700

5

Demo Url and Session Based https://jsfiddle.net/w2wkcx0e/6/

Demo Url Based https://jsfiddle.net/w2wkcx0e/3/

Demo https://jsfiddle.net/w2wkcx0e/1/

you could save the position at leaving page and reload it upon page reloading.

Let me know if doesn't work in all browsers you want it to work.

if (localStorage.scrollPos != undefined)
    $('#container').scrollTop(localStorage.scrollPos);

window.onbeforeunload = function () {
    localStorage.setItem("scrollPos", $('#container').scrollTop());
};

edited Jun 20 '15 at 17:49

answered Jun 14 '15 at 03:03

Muhammad Umer

17,263
19
97
168

Thanks. I tried to implement `onbeforeunload` on my page but nothing happened. And then I searched and found [someone said](http://stackoverflow.com/questions/4802007/window-onbeforeunload-not-working-in-chrome#answer-9411789) Chrome only allows using `onbeforeunload` to set message. Then I tested using `onbeforeunload` to set message on my page and that worked. However, your example on jsFiddle does work. That's weird. Any idea? – Ian Y. Jun 14 '15 at 04:17
One work around would be sto save scrolltop position every half second and upon loading scroll to that position. This will do this but test performance. – Muhammad Umer Jun 14 '15 at 13:51
I guess storing scrollTop value wouldn't be the best solution for my case. On my website, there are actually lots of pages which have `#container`. If users stored scrollTop value at page A and then go to page B, they would incorrectly jump to the position stored at page A. – Ian Y. Jun 14 '15 at 14:03
Thank you. However, as stated above, codes in `onbeforeunload` somehow doesn't work if it is anything other than message. – Ian Y. Jun 14 '15 at 15:51
but it's working, where does it not work, i checked ff and its working there too – Muhammad Umer Jun 14 '15 at 16:01
I see. I will check it in detail tomorrow and let you know the result. Thank you. – Ian Y. Jun 14 '15 at 16:22
1

@Muhannmad Umer, hi, I added a simple code at the bottom of the original post. You could save it as a .html file to test. The `alert('Are you sure')` within the `onbeforeunload` doesn't work in both Firefox and Google Chrome. But if you change `alert('Are you sure')` to `return 'Are you sure'`, then it works. – Ian Y. Jun 15 '15 at 02:34
Perhaps storing scroll position is still not the best solution, even if it's url based. It could be confusing. For example, what if a visitor, via a direct link, revisited a page which he stored a scroll position previously? It's weird that a visitor jumps to a position when not visiting the page with Back button. – Ian Y. Jun 15 '15 at 09:32
Maybe using `sessionStorage` inside `$('#container').scroll(function() { ...... })` could work. Not sure about performance issue though. – Ian Y. Jun 16 '15 at 02:18
Thank you. Looking forward to your new version. – Ian Y. Jun 20 '15 at 14:04
2

Actually i think session storage is a better option. – Muhammad Umer Jun 20 '15 at 17:26

How to make Google Chrome and iOS remember scroll position in div after returning back?

1 Answers1