如何：在视区中添加类时

问题描述

当用户滚动到页面的此部分时，我试图加载类似于https://stackoverflow.com/a/45378478（预览：https://codepen.io/jbanegas/pen/LjpXom）的图形动画效果。旨在在用户浏览页面时添加多个这些绘图框。

我意识到jQuery现在已经过时了，但这是在已经利用此框架的WordPress网站上。

jQuery

<script type='text/javascript'> 
    $(document).ready(function(){
        $('.thisisatest').addClass('draw');
    });
</script>

HTML

<div class="thisisatest"></div>

我尝试将.ready()替换为：

onload-https://www.w3schools.com/jsref/event_onload.asp

.scroll()-https://api.jquery.com/scroll/

任何帮助将不胜感激。

解决方法

您缺少基本知识。除了添加滚动事件之外，您还需要确定元素是否明显位于视口中。

这是香草JS解决方案...

它将在具有.thisisatest类的所有div上工作。

References阅读有关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);

示例： jsfiddle