gpt4 book ai didi

css - 返回后如何让谷歌浏览器和iOS记住div中的滚动位置?

转载 作者:行者123 更新时间:2023-11-28 08:36:13 25 4
gpt4 key购买 nike

问题是滚动容器是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;
}

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://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>

最佳答案

基于演示 URL 和 session 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());
};

关于css - 返回后如何让谷歌浏览器和iOS记住div中的滚动位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30825085/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com