vue中检测元素是否滚动到可视区域
检测元素是否滚动到浏览器可视范围,通常在做效果时使用
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210122092212128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk3NTU4MQ==,size_16,color_FFFFFF,t_70)
方法:
/**
* 检测元素是否滚动到可视范围
* @param {*} el
*/
isElementNotInViewport: (el) => {
if (el) {
let rect = el.getBoundingClientRect();
return (
rect.top >=
(window.innerHeight || document.documentElement.clientHeight) ||
rect.bottom <= 0
);
}
}
使用:
window.addEventListener('scroll', this.isElementNotInViewport(this.$refs.box))
注意:在页面销毁时需要解绑挂载的scroll事件