[jQuery]判断元素是否进入视窗

网页开发的时候，常常需要了解某个元素是否进入到"视口"(viewport),即用户在当前屏幕内是否看到这个元素

上图的绿色方块不断滚动，顶部会提示它的可见性。

思路 一

监听窗口 scroll 事件后，调用目标元素的 getBoundingClientRect() 方法, 获得该元素相对于视口左上角的坐标，然后在判断是否在视口内部。
这个方法的缺点是，由于 scroll 事件密集发生，容易造成性能问题；

//视口的高度
winHeight = $(window).height();

// 元素顶部相对坐标
elTop = object.getBoundingClientRect().top

//元素底部相对坐标
elBottom = object.getBoundingClientRect().top

if( elTop < winHeight && elBottom > 0 ){
    // 看得见
}else{
    // 看不见
}

Demo

思路 二、

1. API

利用浏览器原生提供的构造函数 IntersectionObserver ,

var io = new IntersectionObserver(callback, option);

callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。

// 开始观察
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();

上面代码中，observe 的参数是一个 DOM 节点对象。如果要观察多个节点，就要多次调用这个方法

io.observe(elementA);
io.observe(elementB);

2. callback参数

目标元素的可见性发生变化，就会调用观察期的回调函数 callback ,即 刚刚能看见元素 和 完全看不到元素的时候 都会触发回调函数

var io = new IntersectionObserver(
    entries => {
        console.log(entries);
    }
);　

entries 是 回调函数的参数，它的类型是数组, 数组的每个成员都是一个IntersectionObserverEntry对象。

简单来说, 如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。

3. IntersectionObserverEntry 对象

IntersectionObserverEntry对象提供目标元素的信息，一共有七个属性。

{
    // time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
    time: 3893.92,
    // 根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
    rootBounds: ClientRect {
        bottom: 920,
        height: 1024,
        left: 0,
        right: 1024,
        top: 0,
         920
    },
    // 目标元素的矩形区域的信息
    boundingClientRect: ClientRect {
        // ...
    },
    // 目标元素与视口（或根元素）的交叉区域的信息
    intersectionRect: ClientRect {
        // ...
    },
    // 被观察的目标元素，是一个 DOM 节点对象
    target: element,
    // 目标元素当前是否可见 Boolean值 可见为true
    isIntersecting: true,
    // 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
    intersectionRatio: 0.54
}

　　

4. 判断元素是否进入视窗

var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (item) {
        var el = item.target;
        if (item.isIntersecting) {
            // 看得见
            // 停止观察
            io.unobserve(el);
        } else {
            // 看不见
        }
    })
});

Demo

 

5. Option 对象

threshold 属性

threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。

new IntersectionObserver( entries => {
    /* ... */
    }, {
        threshold: [0, 0.25, 0.5, 0.75, 1]
    }
);

　　表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。

root 属性

用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素

rootMargin

用来扩大或者缩小视窗的的大小，使用css的定义方法，10px 10px 30px 20px 表示top、right、bottom 和 left的值

new IntersectionObserver( entries => {
        /* ... */
    }, {
        root: document.querySelector('.box'),
        rootMargin: '30px 100px 20px'
    }
);

　　

蓝线就是咱们定义的root元素，我们添加了rootMargin属性，将视窗的增大了，虚线就是现在的视窗，所以元素现在也就在视窗里面了。

由此可见，root元素只有在rootMargin为空的时候才是绝对的视窗。

参考文章 

http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html

https://www.jianshu.com/p/84a86e41eb2b