Ian*_* Y. 5 css browser scroll position back
问题是滚动容器是div,而不是body。这会导致 Google Chrome 和 iOS 无法记住div用户转到另一个页面然后返回后的滚动位置。
相关的CSS代码如下。滚动容器是#container.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
#container {
height: 100%;
overflow: auto;
}
Run Code Online (Sandbox Code Playgroud)
而这里是一个演示上的jsfiddle。请在 Google Chrome 和 iOS 上重现该问题,方法是将内容滚动到大约 50%(或任何其他明显长度),单击超链接转到另一个页面,然后单击浏览器的后退按钮。
有没有一种简单的方法可以让 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://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>
Run Code Online (Sandbox Code Playgroud)
基于演示 URL 和会话 https://jsfiddle.net/w2wkcx0e/6/
基于演示网址 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());
};
Run Code Online (Sandbox Code Playgroud)