funme / coding

loving && coding && living
0 stars 0 forks source link

交叉观察者 IntersectionObserver 实现懒加载、吸顶、触底 #59

Open yangmaoHu opened 5 years ago

yangmaoHu commented 5 years ago

原文

IntersectionObserver 翻译为 "交叉观察者"
监听目标元素跟指定父元素(用户可指定,默认为viewport)是否在发生交叉行为
简单理解就是监听目标元素是否进入或者离开了指定父元素的内部

image

yangmaoHu commented 5 years ago

用法

  1. 构造函数

    new IntersectionObserver(callback, options);
  2. callback 发生交叉的回调,接受一个entries参数,返回当前已监听并且发生了交叉的目标集合(后面会举例说明为什么是"且发生了交叉"):

    new IntersectionObserver(entries => {
    entries.forEach(item => console.log(item));
    // ...
    });