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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -