vue中检测元素是否滚动到可视区域
检测元素是否滚动到浏览器可视范围,通常在做效果时使用
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a7074c2cb6917c6bcd52482bcc90e5c1.png)
方法:
/**
* 检测元素是否滚动到可视范围
* @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事件