Javascript 如何：在剖面位于视口中时添加类

当用户滚动到页面的这一部分时，我试图获得类似（预览：）的绘图动画效果。其目的是在用户导航页面时添加多个图形框

我意识到jQuery现在有点过时了，但这是在一个已经使用这个框架的WordPress网站上

jQuery

$（文档）.ready（函数（）{
$（'.thisistest'）.addClass（'draw'）；
});

HTML

我已尝试将

.ready（）

替换为：

onload

-

.scroll（）

-

---

任何帮助都将不胜感激。

您缺少基本知识。除了添加滚动事件外，您还需要确定元素是否在视图端口中

这里是香草JS解决方案

它将在所有具有内容的div和

上运行。这是一个测试类

阅读有关
isInViewport
功能如何工作的链接

var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (
    distance.top >= 0 &&
    distance.left >= 0 &&
    distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};
// read the link on how above code works

var findMe = document.querySelectorAll('.thisisatest');

window.addEventListener('scroll', function(event) {
// add event on scroll
findMe.forEach(element => {
    //for each .thisisatest
    if (isInViewport(element)) {
      //if in Viewport
      element.classList.add("draw");
    }
});
}, false);

var isInViewport=函数（elem）{
var distance=elem.getBoundingClientRect（）；
返回(
distance.top>=0&&
距离左>=0&&
distance.bottom您缺少基本元素。除了添加滚动事件，您还需要确定元素是否在视图端口中

这里是香草JS解决方案

它将在所有具有内容的div和
上运行。这是一个测试类

阅读有关
isInViewport
功能如何工作的链接

var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (
    distance.top >= 0 &&
    distance.left >= 0 &&
    distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};
// read the link on how above code works

var findMe = document.querySelectorAll('.thisisatest');

window.addEventListener('scroll', function(event) {
// add event on scroll
findMe.forEach(element => {
    //for each .thisisatest
    if (isInViewport(element)) {
      //if in Viewport
      element.classList.add("draw");
    }
});
}, false);

var isInViewport=函数（elem）{
var distance=elem.getBoundingClientRect（）；
返回(
distance.top>=0&&
距离左>=0&&
distance.bottom jquery尚未过时，但它正在慢慢消亡：）当你滚动到一个特定的容器时，你需要这个动画吗？这是正确的，但是在一个页面上会有一些动画。我可以想象，一旦一个动画开始工作，它只是改变了被称为@sergeykuznetsov的类。请在这里插入你的代码和许多块，我会帮助你jQuery还没有过时，但它会慢慢变慢死亡：）当你滚动到一个特定的容器时，你需要这个动画吗？这是正确的，但是在一个页面上会有一些这样的动画。我可以想象一旦一个动画开始工作，它只是改变被称为@sergeykuznetsov的类。请在这里插入你的代码和许多块，我会帮助你
var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (
    distance.top >= 0 &&
    distance.left >= 0 &&
    distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};
// read the link on how above code works

var findMe = document.querySelectorAll('.thisisatest');

window.addEventListener('scroll', function(event) {
// add event on scroll
findMe.forEach(element => {
    //for each .thisisatest
    if (isInViewport(element)) {
      //if in Viewport
      element.classList.add("draw");
    }
});
}, false);