Question

我有一个简单的页面，其中正文具有display: flex。顶部有“固定”标题，可滚动的主要内容带有flex: 1，以填充页面的其余部分。当我向下滚动并单击链接以导航到页面之外时，当我返回时，滚动位置不会保留，并且我会从顶部看到页面。在Firefox中，滚动被保留。没有JS。

 body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}
header {
    background-color: silver;
}
main {
    flex: 1;
    overflow-y: scroll;
}

<header>
    This is header
</header>

<main>
Scroll down, then click link<br>
1<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
2<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
3<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
4<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
5<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a href="http://stackoverflow.com/">link away</a><br>
</main>

您可能无法在此处进行正确的测试，因此我将同一演示放在单独的页面上：https://ghost.sk/chrome-flexbox-scroll-not-preserved-on-back-button/index.html

如果显示正文，则不会在后退按钮上保留Chrome滚动位置：flex

0 个答案: