单击时将页面滚动 100vh（包括 mobile/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);
}

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

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

javascript

css

jquery

scroll

mobile-safari