监听组件是否出现在可视区域

1.weex有apperad的属性，但是h5不适用
2.通过监听，计算这个组件离屏幕上边界和下边界的大小，来判断是否出现在屏幕上
缺点：计算会耗费性能，可能会降低页面性能

  1. IntersectionObserver监听
    Intersection observer 允许你配置一个回调函数，每当target进入浏览器视窗时，触发回调函数。
var options = {
    root: document.querySelector('#scrollArea'), 
    rootMargin: '0px', 
    threshold: 1.0
}
var callback = function(entries, observer) { 
    /* Content excerpted, show below */ 
};
var observer = new IntersectionObserver(callback, options);

调用

observer.observe(document.querySelector("#" + boxID));

ps:获取元素只能用document.querySelector，ref获取的元素不可以。必须是element元素

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容