JavaScript 监听元素是否进入/移出可视区域

迷南。 2022-04-05 10:08 383阅读 0赞

### JavaScript 监听元素是否进入/移出可视区域 ###

*   *  常规操作
     *  防抖节流
     *  IntersectionObserver
     *  兼容的代码

## 常规操作 ##

通常的做法是，监听srcoll事件，根据元素的offset来判断。

window.addEventListener('scroll', this.scrollHandle, true);

使用getBoundingClientRec()来获取元素的位置。

scrollHandle () { 
        const offset = this.$el.getBoundingClientRect(); // vue中，使用this.$el获取当前组件的根元素
        const offsetTop = offset.top;
        const offsetBottom = offset.bottom;
        const offsetHeight = offset.height;
        // 进入可视区域
        if (offsetTop <= window.innerHeight && offsetBottom >= 0) { 
            console.log('进入可视区域');
            // do something...
        } else { 
            console.log('移出可视区域');
            // do something...
        }
    }

记得在适当的时候移除事件监听

window.removeEventListener('scroll', this.scrollHandle, true);

但是这种操作，使得我们的开销变得很大，所以可以考虑防抖和节流。

## 防抖节流 ##

关于防抖和节流，看过不一样的理解，有的人认为防抖和节流是一个意思，在这里，按照我的理解，给防抖和节流的定义如下：  
  防抖：在停止触发一段时间后再调用方法；  
  节流：再一段时间内至少调用一次方法；  
  具体的原理就不讲了，直接上代码，iselapsed参数表示是否等待上一次，也就是iselapsed为true，则为节流。

/** * 防抖节流 * @param {*} action 回调 * @param {*} delay 等待的时间 * @param {*} context this指针 * @param {Boolean} iselapsed 是否等待上一次 * @returns {Function} */
    function throttle (action, delay, context, iselapsed) { 
        let timeout = null;
        let lastRun = 0;
        return function () { 
            if (timeout) { 
                if (iselapsed) { 
                    return;
                } else { 
                    clearTimeout(timeout);
                    timeout = null;
                }
            }
            let elapsed = Date.now() - lastRun;
            let args = arguments;
            if (iselapsed && elapsed >= delay) { 
                runCallback();
            } else { 
                timeout = setTimeout(runCallback, delay);
            }
            /** * 执行回调 */
            function runCallback() { 
                lastRun = Date.now();
                timeout = false;
                action.apply(context, args);
            }
        };
    }

在这里，我希望方法在一段时间内至少执行一次，所以我用节流

window.addEventListener('scroll', this.scrollHandle, true);

this.scrollHandle = throttle(this.scrollThrottle, 200, this, true)

scrollThrottle () { 
        const offset = this.$el.getBoundingClientRect();
        const offsetTop = offset.top;
        const offsetBottom = offset.bottom;
        const offsetHeight = offset.height;
        // 进入可视区域
        if (offsetTop <= window.innerHeight && offsetBottom >= 0) { 
            console.log('进入可视区域');
            // do something...
        } else { 
            console.log('移出可视区域');
            this.enabledPause = false;
            // do something...
        }
    }

## IntersectionObserver ##

安卓设备和部分浏览器支持IntersectionObserver来通知我们元素进入/移出可视区域。  
  判断是否支持IntersectionObserver：

if ('IntersectionObserver' in window &&
        'IntersectionObserverEntry' in window &&
        'intersectionRatio' in window.IntersectionObserverEntry.prototype) { 
        // do something
    }

创建IntersectionObserver,并传入回调，指定进入/移出可视区域时的操作。还可以传入一个对象（\{threshold, root\}），用来配置IntersectionObserver。  
  threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，例如\[0, 0.25, 0.5, 0.75, 1\]。默认为\[0\]，即交叉比例（intersectionRatio）达到0时触发回调函数。  
  root属性用来指定根元素。  
  callback函数的参数entries是一个数组，每个成员都是一个IntersectionObserverEntry对象，其中的intersectionRatio属性表示监听的元素与根元素的交叉的比例，>0则表示此时进入可视区域。

this.observer = new IntersectionObserver(entries => { 
        if (entries[0].intersectionRatio > 0) { 
            console.log('进入可视区域');
            // do something
        } else { 
            console.log('移出可视区域');
            // do something
        }
    });

开始监听

this.observer.observe(this.$el);

取消监听

this.observer.disconnect();

## 兼容的代码 ##

因为iOS不支持IntersectionObserver，所以我们要在不支持的时候继续监听scroll事件。  
  贴上完整的代码

import throttle from '../throttle.js';
    export default { 
        data () { 
            return { 
                observer: null,
                scrollHandle: throttle(this.scrollThrottle, 200, this, true)
            };
        },
        mounted () { 
            // 判断是否支持 IntersectionObserver
            if ('IntersectionObserver' in window &&
                'IntersectionObserverEntry' in window &&
                'intersectionRatio' in window.IntersectionObserverEntry.prototype) { 
                this.observer = new IntersectionObserver(entries => { 
                    if (entries[0].intersectionRatio > 0) { 
                        console.log('进入可视区域');
                        // do something
                    } else { 
                        console.log('移出可视区域');
                        // do something
                    }
                });
            }
        },
        methods: { 
            startObserve () { 
                if (this.observer) { 
                    this.observer.observe(this.$el);
                } else { 
                    window.addEventListener('scroll', this.scrollHandle, true);
                }
            },
            endObserve () { 
                if (this.observer) { 
                    this.observer.disconnect();
                } else { 
                    window.removeEventListener('scroll', this.scrollHandle, true);
                }
            },
            scrollThrottle () { 
                const offset = this.$el.getBoundingClientRect();
                const offsetTop = offset.top;
                const offsetBottom = offset.bottom;
                const offsetHeight = offset.height;
                // 进入可视区域
                if (offsetTop <= window.innerHeight && offsetBottom >= 0) { 
                    console.log('进入可视区域');
                    // do something
                } else { 
                    console.log('移出可视区域');
                    // do something
                }
            }
        }
    }

throttle.js

/** * 回调节流 * * @export * @param {*} action 回调 * @param {*} delay 等待的时间 * @param {*} context this指针 * @param {Boolean} iselapsed 是否等待上一次 * @returns {Function} */
    export default function throttle (action, delay, context, iselapsed) { 
        let timeout = null;
        let lastRun = 0;
        return function () { 
            if (timeout) { 
                if (iselapsed) { 
                    return;
                } else { 
                    clearTimeout(timeout);
                    timeout = null;
                }
                // return;
            }
            let elapsed = Date.now() - lastRun;
            let args = arguments;
            if (iselapsed && elapsed >= delay) { 
                runCallback();
            } else { 
                timeout = setTimeout(runCallback, delay);
            }
            /** * 执行回调 */
            function runCallback() { 
                lastRun = Date.now();
                timeout = false;
                action.apply(context, args);
            }
        };
    }