I am currently working on an unconventional website with a quirky design. It is meant to have a visually appealing layout with plenty of animations and full responsiveness. The main body element is set to overflow: hidden; and the structure is as follows:
<div id="wrapper">
<div class="content"> Content with a down button goes here ...</div>
<div class="content"> Content with up/down button goes here ...</div>
<div class="content"> Content with up/down button goes here ...</div>
<div class="content"> Content with an up button goes here ...</div>
</div>
Each .content section has an up/down navigation button that allows users to scroll to each div. These sections are full width and height, and if the content exceeds the space, the div becomes scrollable. You cannot simply scroll to the next content by continuous scrolling; you must use the navigation buttons to move between divs.
Due to resizing issues, the alignment of .content sections can sometimes become disrupted. For example, two content divs may be partially visible at the same time (e.g. 80% of #1 and 20% of #2). To address this problem, I have implemented a function that resets the page and returns the user to the top of .content #1 upon resizing.
While this setup performs well on desktops (and in Chrome on Android), there are compatibility challenges with iOS and Safari. The address bar remains visible, and the traditional window.scrollTo(0,0); (or window.scrollTo(0,1);) method does not work as expected. Despite this, in certain scenarios, when scrolling within the content, Safari may unpredictably decide to hide the address bar, which triggers a resize event and forces the user back to the top of the page.
Do you have any suggestions on how to consistently keep the address bar visible or always hide it? Alternatively, are there any other solutions to address this issue?