我一直在尝试实现一种设计，其中我们有一个没有滚动条的全屏标题，但是当您尝试在标题上滚动时，页面会向下对齐 (100vh) 到网站的内容。然后内容会正常滚动。
当您向上滚动时会发生同样的事情 - 您滚动浏览页面内容直到碰到页眉，然后您被带到 (100vh) 到页眉。
最重要的是，我在网站内容中使用了基于滚动的动画，而且我需要能够在点击时滚动到下一部分和网站内容中的特定 div。
<body>
<div class="header">
... 100vh header, does not have a scrollbar, snaps to next section on scroll
</div>
<div class="content">
... website's content, has scrollbar and scrolls normaly through the content
</div>
</body>
我们尝试了 Scrollify，但在 100vh 部分和超过 100vh 的内容之间切换时遇到了问题，但最重要的是 - 每个 scrollify 部分都是可滚动网站的一部分，并且有一个滚动条。
如果用户在页面顶部，我们还尝试了基本上监听正文滚动的内容，然后向下移动 100vh(反之亦然):https://codepen.io/luciestefkova/full/OGVryw
最佳答案
您可以做一些事情来实现这个设计。
- 将内容的高度默认设置为 height: 0。
- 将您的滚动事件监听器更改为“wheel”。如果页面没有可滚动的内容，滚动将永远不会触发。滚轮 但是，您可以检测滚轮方向，如果方向向下，则将内容的高度设置回正常(高度:未设置)
- 使用动画库滚动到内容容器的开头。
- 将 IntersectionObserver 添加到您的内容容器，以便当它离开视口(viewport)时(基本上如果用户滚动回页面顶部)让内容的高度再次回到 0，从而删除滚动条。
注意:您还需要使用 touchstart/touchend 来检测移动设备上的滚动方向。同样，如果没有可滚动窗口，滚动将无法工作，因此需要滚轮和触摸事件。
关于jquery - "Unscrollable"100vh 部分捕捉到可滚动的网站内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55481080/