javascript 所有templatecontent类的Vanilla JS Scroll Reveal

Posted 2021-05-03

let boxes = document.querySelectorAll(".templatecontent");
let inView = elem => {
  return (
    window.scrollY >= elem.offsetTop - window.innerHeight + 200 &&
    window.scrollY <= elem.offsetTop + elem.offsetHeight
  );
};
//let outView = elem => {
//  return (
//    window.scrollY >= elem.offsetTop + elem.offsetHeight ||
//    window.scrollY <= elem.offsetTop - window.innerHeight
//  );
//};

let scroller = () => {
  boxes.forEach(i => {
    if (inView(i)) {
      i.classList.add("reveal");
    }
//    if (outView(i)) {
//      i.classList.remove("reveal");
//    }
  });
};

window.addEventListener("scroll", scroller, false);