我在一个网站上工作，其中一个javascript动画是打算开始当用户滚动到其中与动画相关的元素所在的部分的视图。我使用了以下函数:
async startDelay(){
if(!window.scrollY > document.querySelector('#about')){
this.start();
}
else{
setTimeout(this.startDelay, 300);
}
}
当我滚动到元素时，动画没有开始，有什么想法吗?
这个问题有两个部分。一个是检测元素何时滚动到视图中。另一个是动画。
给定的代码不能工作，因为async不能与setTimeout一起使用。当async函数中不包含await时，已经是可疑的了。如果需要setTimeout，则应该删除该关键字。另一个问题是!window.scrollY > document.querySelector('#about')没有意义。它变成了!12345 > document.querySelector('#about')然后是false > document.querySelector('#about')然后是false > SomeKindOfElement。基于getBoundingClientRect的东西可以在那里使用，但有一个更好的方法。
现代浏览器支持使用InteractionObserver要求它们在元素滚动到视图中时通知。只需要调用这个函数一次:
// I assume the original code was placed in a class,
// and calls this exactly once on startup after the document is loaded
setup() {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
observer.disconnect(); // Cleanup
this.start(); // Start the animation
}
});
observer.observe(document.querySelector("#trigger-on-scroll"));
}
问题的另一半是开始动画。现代的方法是使用transition(更高级的是animation)定义样式，并在元素滚动到视图中时为元素添加一个类。
下面是一个带有一些占位符内容和简单动画的交互示例:
document.addEventListener("DOMContentLoaded", () => {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
observer.disconnect();
document.querySelector("#animate-me").classList.add("start-animating");
document.querySelector("#trigger-on-scroll").classList.add("another-animation");
}
});
observer.observe(document.querySelector("#trigger-on-scroll"));
});header>div {
padding: 70px;
background: #faa;
}
header>div:nth-child(even) {
background: #afa;
}
header>div::after {
content: " header padding";
}
footer>div {
padding: 50px;
background: #faf;
}
footer>div:nth-child(even) {
background: #aaf;
}
footer>div::after {
content: " footer padding";
}
aside {
position: fixed;
width: 100px;
height: 50px;
right: 50px;
bottom: 50px;
background: #ff0;
}
.start-animating {
background: #0f0;
transition: background 1s;
}
article {
height: 500px;
background: #00f;
}
.another-animation {
background: #aaf;
transition: background 3s;
}<!doctype html>
<html>
<body>
<header>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</header>
<article id="trigger-on-scroll">
You saw me!
</article>
<footer>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</footer>
<aside id="animate-me">Watch me!</aside>
</body>
</html>