Хромированная позиция прокрутки не сохраняется на кнопке «Назад», если отображается тело: flex - PullRequest
0 голосов
/ 05 января 2019

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

...