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

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 {Fun