我有几个元素在使用最新的Animate On Scroll库(https://github.com/michalsnik/aos)进行查看(进入视口)时触发自定义事件。
https://codepen.io/anon/pen/vMGQEb
HTML:
<div class="foo" data-aos data-aos-id="inview">
Foo 1
</div>
<div class="foo" data-aos data-aos-id="inview">
Foo 2
</div>
JS:
// Init AOS
AOS.init();
// Toggle red color
document.addEventListener('aos:in:inview', function(e) {
e.detail.classList.add('text-red');
});
CSS:
.text-red {
color: red !important;
}
假定该简单脚本在进入视口时将foo
元素涂成红色。除了Edge和IE之外,其他任何地方都可以正常工作。据我所知,e.detail
不返回DOM元素,但是某些对象我不知道该怎么做。
有什么想法吗?