4

I have a simple page where body has display: flex. There is "fixed" header on top and scrollable main content with flex: 1 to fill the rest of the page. When I scroll down and click on the link to navigate away from page, when I return back scroll position is not preserved and I see page from the top. In Firefox the scroll is preserved. There is no JS involved.

 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>

You may not be able to properly test it here, so I put the same demo on a stand alone page: https://ghost.sk/chrome-flexbox-scroll-not-preserved-on-back-button/index.html

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
asdjfiasd
  • 1,572
  • 15
  • 28
  • *Maybe* it's a scroll anchoring issue. Check into the [`overflow-anchor`](https://stackoverflow.com/q/44826446/3597276) property. – Michael Benjamin Jan 05 '19 at 14:15
  • Here's a post with the exact opposite behavior on Chrome (scroll position is remembered): https://stackoverflow.com/q/16239520/3597276 – Michael Benjamin Jan 05 '19 at 14:16
  • I've tried overflow-anchor: none on both body and main and it didn't help – asdjfiasd Jan 05 '19 at 14:48
  • Look at [this post and answers](https://stackoverflow.com/questions/25168861/take-user-back-to-where-they-scrolled-to-on-previous-page-when-clicking-browser) please! – Mordecai Jan 05 '19 at 21:33
  • check this post https://stackoverflow.com/questions/29203312/how-can-i-retain-the-scroll-position-of-a-scrollable-area-when-pressing-back-but maybe it would helps. – M4r Oct 11 '19 at 14:19

0 Answers0