Search code examples
javascriptjquerycssscrollmobile-safari

Scroll page by 100vh (including mobile/safari nav elements) on click

For one of our clients we have made a click-through portfolio. By disabling the scroll on the page and instantly moving the page 100vh down on click – we create the illusion that we see a new page, without actually loading it. It works great on desktop. See it here. Here is the javascript used to achieve it:

<!-- Click area and on-click action -->  
<div class="click-next" onclick="scrollWin(0, window.innerHeight)"></div>
<div class="click-back" onclick="scrollWin(0, window.innerHeight / -1)"></div>


<script>

// Scroll function
function scrollWin(x, y) {
  window.scrollBy(x, y);
}

</script>

On mobile however, I'm running into a problem. When first entering the page, the safari search-bar is visible. When clicking through, the page will scroll down the full height excluding the height of the search bar and offsetting the whole thing:

enter image description here

How do I make sure that the script scrolls by 100vh, ignoring native mobile browser elements? (I am not Javascript guru by any means. The site it made in Webflow).

Solution

  • Try this code

    function scrollYByVh() {
  const clientHeight = document.body.clientHeight;
  window.scrollBy(0, clientHeight);
}