是否有办法知道用户是否在特定的标题，段落或div等

Question

我试图找到一种方法来启动一个动画，只有当用户是在它，首先我尝试获得屏幕大小，它的作品，但它不是一个最佳的解决方案。有一次我在谷歌上发现，我们可以在滚动时获得ID(通过ID标签)，如果我可以在向下滚动时获得ID，我可以使用一个简单的JavaScript函数来播放动画。有办法吗?

Answer 1

好吧，我自己找到的。我想做什么?我想开始一个动画(技能栏)，只有当用户看到它/在它/已经通过了以前的信息。我使用section, JavaScript，然后当用户在上面时触发动画。

一个例子(我很抱歉混乱的代码，我不知道在这里对齐代码)

<section id="name">
<div class="hello">
<h1>Hello world</h1>
</div>
</section>

<section id="aboutMe">
<div class="hello">
<h1>Hello world</h1>
</div>
</section>

<section id="skills">
<div class="hello">
<h1>these are my skills</h1>
</div>
</section>

JAVASCRIPT:

var element = document.querySelector("#skills");

function isInViewPort(element) {
// Get the bounding client rectangle position in the viewport
var bounding = element.getBoundingClientRect();
// Checking part. Here the code checks if it's *fully* visible
// Edit this part if you just want a partial visibility
if (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
) {
return true;
} else {
return false;
}
}
var element = document.querySelector("#skills");

if (isInViewPort(element)) {
alert('true')
}

希望这对将来的人有帮助