某个元素是否在可视区域

判断一个元素是否在可视化区域方法

scrollTop、offsetHeight和offsetTop等属性用法

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

scrollTop、offsetHeight和offsetTop等属性用法详解

方法如下

    // 判断元素是否在可视区域
    isInViewPortOfOne(el) {
      // viewPortHeight 兼容所有浏览器写法
      const viewPortHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;

        //offsetTop  上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离
                //当前元素的上外边缘距离文档内壁的距离
      const offsetTop = el.offsetTop 
 //滚动条到顶部的垂直高度
      const scrollTop = document.documentElement.scrollTop;

      const top = offsetTop - scrollTop;
      return top <= viewPortHeight && top >= 0;
    },