如何知道元素是不是对用户可见？ [复制]

Posted 2023-02-21

【中文标题】如何知道元素是不是对用户可见？ [复制]

【英文标题】：how to know if an element is visible to the user? [duplicate]如何知道元素是否对用户可见？ [复制]

【发布时间】：2019-06-02 23:17:06

【问题描述】：

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

【问题讨论】：

到目前为止你的代码尝试在哪里？

【参考方案1】：

在使用 3rd 方库之前，我会先看看 Intersection Observer。

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

Support 在 Safari 之外相当不错，尽管有一个 polyfill。我通常不提倡使用 polyfill，除非被 polyfill 的特性极大地简化了 Web 开发。在这种情况下，我认为 Intersection Observer 值得使用 polyfill。在 Observer 之前，创建一个包含许多滚动点相交事件的复杂应用程序需要跳过的环节是一个巨大的麻烦。

这是来自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>

【参考方案2】：

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

【参考方案3】：

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