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

我正试图让网络像这样。我不知道当用户向下滚动页面时，如何产生这样的效果。而且各部分的背景也变长了。如何知道用户是否向下滚动并且元素对用户可见。

---

我的问题很像是试试看。两者都是滚动动画库。只要页面元素在用户的视口中，它们基本上就会触发页面元素上的动画事件。

如果您想创建一个像您提到的示例那样的网站。你真的不需要从头开始创造这种效果。有一个非常受欢迎的库，大多数网站都使用过，比如你的示例，它叫aos，你可以在这里找到：

在使用第三方库之前，我会看一下

交叉点观察者API提供了一种异步观察目标元素与祖先元素或顶级文档视口交叉点中的更改的方法

在Safari以外的地方很不错，不过有一个。我通常不提倡使用多边形填充，除非多边形填充的特性大大简化了web开发。在这种情况下，我认为交叉点观察者值得使用多边形填充。在Observer之前，创建一个包含许多滚动点相交事件的复杂应用程序所需的工作是一个巨大的麻烦

这是一个来自中国的演示

var statusBox=document.getElementByIdstatusBox； var statusText=document.getElementByIdstatusText； 函数句柄入口，观察者{ 输入参赛作品{ statusText.textContent=entry.isIntersecting； if entry.isIntersecting{ statusBox.className=是； }否则{ statusBox.className=否； } } } /*默认情况下，在以下情况下调用处理程序： 1.目标的任何部分都会进入视口 2.目标的最后一部分离开视口*/ 让observer=新的IntersectionObserverhandler； observer.observedDocument.getElementByIdtarget； html{ 身高：200%； 最小高度：400px； 文本对齐：居中； 字体系列：无衬线； 垫面：3.5em； } 视区{ 位置：固定； 排名：0； 左：0； 底部：0； 右：0； 颜色：aaa； 字体大小：粗体； 字体大小：20vh； 边框：8px虚线aaa； 填充顶部：40vh； 保证金：0； 用户选择：无； 游标：默认值； } 目标{ 背景色：08f； 显示：内联块； 裕度：100vh自动100vh； 颜色：白色； 填充物：4em 3em； 位置：相对位置； } 状态框{ 位置：固定； 排名：0； 左：1米； 右：1em； 字体系列：monospace； 填充：0.5em； 背景色：ff8； 边框：3倍实心cc5； 不透明度：.9； } 是的{ 背景：8f8； 边框颜色：5c5； } 状态框编号{ 背景：f88； 边框颜色：c55； }

视口

向下滚动… 目标

ISINTERSECTION=== 未知的

---

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