css - How to make Google Chrome and iOS remember scroll position in div after returning back? -
the problem scroll container div
, not body
. , causes google chrome , ios fail remember scroll position of div
after users go page , return back.
the related css code follows. scroll container #container
.
* { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; overflow: hidden; } #container { height: 100%; overflow: auto; }
and here demo on jsfiddle. please reproduce issue on google chrome , ios scrolling content 50% (or other noticeable length), click on hyperlink go nother page, , click browser's button.
is there uncomplicated way make google chrome , ios remember scroll position firefox does?
== edit in response answer ==
a simple .html file test if code in onbeforeunload
works.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script> window.onbeforeunload = function () { alert('are sure'); } </script> </head> <body> <div id="container"> <p><strong><a href="http://stackoverflow.com/">go 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>
demo url , session based https://jsfiddle.net/w2wkcx0e/6/
demo url based https://jsfiddle.net/w2wkcx0e/3/
demo https://jsfiddle.net/w2wkcx0e/1/
you save position @ leaving page , reload upon page reloading.
let me know if doesn't work in browsers want work.
if (localstorage.scrollpos != undefined) $('#container').scrolltop(localstorage.scrollpos); window.onbeforeunload = function () { localstorage.setitem("scrollpos", $('#container').scrolltop()); };
Comments
Post a Comment