如何：当部分在视口中时添加 class

Question

我正在尝试获得类似于 (Preview: 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/

如有任何帮助，我们将不胜感激。

Answer 1

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

这是普通的 JS 解决方案...

它适用于所有 div 的内容和 .thisisatest class。

References 阅读 link 了解 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

如何：当部分在视口中时添加 class

Howto: add class when section is in viewport

javascript

jquery

viewport

scrollview

jquery-events