动画在滚动顶部开始答案

【问题标题】：Animation Start on Scroll Top动画在滚动顶部开始
【发布时间】：2022-11-19 17:47:58
【问题描述】：

我在一个网站上工作，当用户滚动到与动画关联的元素所在的部分的视图时，该网站将启动 javascript 动画。我使用以下函数来这样做：

async startDelay(){
        if(!window.scrollY > document.querySelector('#about')){
            this.start();
        }
        else{
            setTimeout(this.startDelay, 300);
        }
    }

当我滚动到元素时动画没有开始，关于为什么的任何想法？

【问题讨论】：

你具体想问什么？有什么不对吗？您可能需要包含更多信息以便有人能够提供帮助。
我在问是否有人能看到我的代码有什么问题。哪些额外信息可能有用？
什么叫startDelay？

标签： javascript html jquery

【解决方案1】：

这个问题有两个部分。一个是检测元素何时滚动到视图中。另一个是动画它。

给定的代码不起作用，因为 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>

【讨论】：