如何解决如何:在视区中添加类时
当用户滚动到页面的此部分时,我试图加载类似于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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。