У меня есть простая страница, где тело имеет 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