I’m trying to create a website with three full pages where the user smoothly scrolls between them. I’ve used a hacky solution found online to ensure that these pages have the appropriate height (full) regardless of whether or not the address bar is visible. However, this means that the height of the pages does change when I scroll, in particular when the address bar vanishes or reappears. This seems (per this question, which diagnoses the problem but wasn’t able to help me resolve it) to be the source of an issue I’m having: sometimes, when I scroll most of the way up from the 3rd slide to the 2nd or the 2nd slide to the 1st, Chrome snaps “backwards” (despite upwards being the more sensible option).

Here’s a demo: https://robintruax.github.io/ Playing around with it on a mobile device (tested on Chrome) should illustrate the issue.

The code (very minimal) is here: https://github.com/RobinTruax/robintruax.github.io

I am not sure how to avoid this issue (I tried to figure out the solution in the question, but could not adapt it) and would love any insight.