如何让 Google Chrome 和 iOS 返回后记住 div 中的滚动位置？

Question

问题是滚动容器是 div，而不是 body。这导致 Google Chrome 和 iOS 在用户转到另一个页面然后 return 返回后无法记住 div 的滚动位置。

相关CSS代码如下。滚动容器是 #container.

* {
    margin: 0;
    padding: 0;
    }

html {
    height: 100%;
    }

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

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

和 here is a demo 在 jsFiddle 上。请通过将内容滚动到大约 50%（或任何其他明显的长度），在 Google Chrome 和 iOS 上重现该问题，单击超链接转到其他页面，然后单击浏览器的后退按钮。

有没有一种简单的方法可以让 Google Chrome 和 iOS 像 Firefox 一样记住滚动位置？

== 编辑以响应答案 ==

一个简单的 .html 文件，用于测试 onbeforeunload 中的任何代码是否有效。

<!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://whosebug.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>

Answer 1

演示 Url 和基于会话 https://jsfiddle.net/w2wkcx0e/6/

演示 Url 基于 https://jsfiddle.net/w2wkcx0e/3/

演示 https://jsfiddle.net/w2wkcx0e/1/

您可以在离开页面时保存位置，并在页面重新加载时重新加载。

如果您希望它在所有浏览器中都不起作用，请告诉我。

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

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

如何让 Google Chrome 和 iOS 返回后记住 div 中的滚动位置？

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

css

browser

scroll

position

back