javascript - 当页面滚动到该部分时触发一个js动画

Question

我正在使用 rendro (https://rendro.github.io/easy-pie-chart/) 的简单饼图插件。基本上我只希望动画仅在我滚动到显示图表的页面上的特定区域时发生。我怎样才能做到这一点？

Answer 1

请考虑使用 Intersection Observer .

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

优点:

• 无需添加滚动监听、去抖功能。
• 代码更清晰、更小。

缺点:

• Safari 缺少支持，因此您需要添加 polyfill .

function handler(entries, observer) {
  for (entry of entries) {
    if (entry.isIntersecting) {
      entry.target.classList.add('inView');
    }
  }
}
let observer = new IntersectionObserver(handler);
observer.observe(document.querySelector(".takeAction"));

.takeAction {
  background-color: #fff;
  transition: 3s background-color;
}

.takeAction.inView {
  background-color: yellow;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p class="takeAction">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>

http://jsfiddle.net/30unpcLm/2/