单击时将页面滚动 100vh（包括移动/Safari 导航元素）

Question

我们为我们的一位客户制作了点击式产品组合。通过禁用页面上的滚动并在点击时立即将页面向下移动 100vh - 我们创造了我们看到一个新页面的错觉，而没有实际加载它。它在桌面上工作得很好。 See it here.这是实现它的javascript：

<!-- 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>

但是，在移动设备上，我遇到了问题。首次进入页面时，可以看到 safari 搜索栏。单击时，页面将向下滚动整个高度，不包括搜索栏的高度并偏移整个内容：

如何确保脚本滚动 100vh，而忽略本机移动浏览器元素？ （无论如何我都不是 Javascript 大师。它在 Webflow 中制作的网站）。

Answer 1

试试这个代码

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