Question

example 我正在尝试建立这样的网络。而且我不知道如何在用户向下滚动页面时产生效果。并且各节的背景变得更长。如何知道用户是否向下滚动并且元素对用户可见。我的问题很像this.

Answer 1

在使用第三方库之前，我先看一下Intersection Observer。

Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档的视口相交的变化的方法。

尽管有Support，但

polyfill在Safari之外还是不错的。我通常不提倡使用polyfill，除非该功能可以大大简化web开发。在这种情况下，我认为路口观察员是值得的。在《观察家》之前，创建具有许多滚动点相交事件的复杂应用程序所需要经历的艰巨任务是一个巨大的麻烦。

这是一个来自here的演示。

var statusBox = document.getElementById("statusBox");
var statusText = document.getElementById("statusText");

function handler(entries, observer) {
  for (entry of entries) {
    statusText.textContent = entry.isIntersecting;

    if (entry.isIntersecting) {
      statusBox.className = "yes";
    } else {
      statusBox.className = "no";
    }
  }
}

/* By default, invokes the handler whenever:
   1. Any part of the target enters the viewport
   2. The last part of the target leaves the viewport */

let observer = new IntersectionObserver(handler);
observer.observe(document.getElementById("target"));

html {
  height: 200%;
  min-height: 400px;
  text-align: center;
  font-family: sans-serif;
  padding-top: 3.5em;
}

#viewport {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #aaa;
  font-weight: bold;
  font-size: 20vh;
  border: 8px dashed #aaa;
  padding-top: 40vh;
  margin: 0;
  user-select: none;
  cursor: default;
}

#target {
  background-color: #08f;
  display: inline-block;
  margin: 100vh auto 100vh;
  color: white;
  padding: 4em 3em;
  position: relative;
}

#statusBox {
  position: fixed;
  top: 0;
  left: 1em;
  right: 1em;
  font-family: monospace;
  padding: 0.5em;
  background-color: #ff8;
  border: 3px solid #cc5;
  opacity: .9;
}

#statusBox.yes {
  background: #8f8;
  border-color: #5c5;
}

#statusBox.no {
  background: #f88;
  border-color: #c55;
}

<p id="viewport">Viewport</p>

<p>Scroll down...<p>

<div id="target">Target</div>

<p id="statusBox">
  isIntersecting ===
  <span id="statusText">unknown</span>
</p>

Answer 2

尝试http://scrollmagic.io/或https://michalsnik.github.io/aos/。两者都在滚动库上设置动画。基本上，只要这些元素在用户的视口中，它们就会在页面元素上触发动画事件。

Answer 3

如果您想像您提到的示例那样建立一个网站。您实际上并不需要从头开始创建那种效果。大多数网站都使用了一个非常流行的库，例如您的示例，它称为aos，您可以在这里找到它：https://michalsnik.github.io/aos/

如何知道某个元素是否对用户可见？

3 个答案: