Question

我一直在尝试实现一种设计，在该设计中，我们具有一个没有滚动条的全屏标题，但是当您尝试在标题上滚动时，页面将（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

Answer 1

您可以执行一些操作来实现此设计。

将内容的高度设置为height：默认为0。
将滚动事件侦听器更改为“ wheel”。如果页面没有可滚动的内容，则滚动不会触发。但是，您可以检测到方向盘，如果方向盘向下，则将内容的高度设置回正常（高度：未设置）
使用动画库滚动到内容容器的开头。
向您的内容容器添加一个IntersectionObserver，以使其在离开视口时（基本上，如果用户滚动回到页面顶部）使内容的高度再次回到0，从而删除滚动条。 / li>

注意：您还需要使用touchstart / touchend来检测移动设备上的滚动方向。同样，如果没有可滚动的窗口，滚动将无法工作，因此为什么需要滚轮和触摸事件。

“无法滚动”的100vh部分捕捉到可滚动的网站内容

1 个答案: