js判断一个元素是否在页面中出现

奋怒的小星

于 2018-01-08 22:17:05 发布

阅读量3.2k

点赞数

文章标签： js es6 编程技巧

本文链接：https://blog.csdn.net/xing2656537/article/details/79007889

版权

今天在项目中，遇到一个需求：需要判断当前元素是否出现在页面中，是则发送请求，否则不发。

基于此需求，需要有一个判断当前元素是否在当前页面中的函数。广阅了一些文章之后，总结并实践写出了如下函数，希望可以帮助到有需要的同猿们~

checkInPage = el => {
    const pageHeight = document.documentElement.clientHeight

    const contentTop = el.getBoundingClientRect().top
    const contentHeight = el.offsetHeight

    return (contentTop<pageHeight && contentTop>=0) || (contentTop<0 && (contentTop+contentHeight>0));
}