时间戳

首页 > 解决方案 > 捕捉到可滚动网站内容的“不可滚动”100vh 部分

jquery - 捕捉到可滚动网站内容的“不可滚动”100vh 部分

问题描述

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

标签： jqueryhtmlcss

解决方案

你可以做一些事情来实现这个设计。

  1. 将内容的高度设置为 height: 0 默认情况下。
  2. 将您的滚动事件侦听器更改为“wheel”。如果页面没有可滚动的内容，则滚动永远不会触发。但是，轮子，您可以检测轮子方向，如果方向向下，请将内容的高度设置回正常值（高度：未设置）
  3. 使用动画库滚动到内容容器的开头。
  4. 将一个 IntersectionObserver 添加到您的内容容器中，以便当它离开视口时（基本上，如果用户滚动回页面顶部），内容的高度会再次回到 0，从而删除滚动条。

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

推荐阅读