可视区域判断(js三种方式判断)

简介: 可视区域判断(js三种方式判断)

offsetTop,scrollTop,viewPortHeight


  • scrollTop:滚动条滚动的距离
  • offsetTop:元素到offsetParent顶部的距离
  • offsetParent:距离元素最近的一个具有定位的祖宗元素(relative,absolute,fixed),若祖宗都不符合条件,offsetParent为body
  • innerHeight表示窗口内容区域的高度,这是不包括边框、菜单栏的

公式:el.offsetTop - document.documentElement.scrollTop <= viewPortHeight


<div class="content">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
      ....
</div>
const el = document.getElementId('el')
window.addEventListener('scroll', e => {
  isInViewPortOfOne(el)
})
function isInViewPortOfOne(el) {
  console.log(el.offsetParent,'offsetParent')//body
  // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  const offsetTop = el.offsetTop
  const scrollTop = document.documentElement.scrollTop
  const top = offsetTop - scrollTop
  // 这里+100是为了提前加载+ 100
  return top <= viewPortHeight +100
 }

getBoundingClientRect


获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,到浏览器可视范围的距离(不包含文档卷起的部分)


<div id="box"></div>
var object=document.getElementById('box');  
rectObject = object.getBoundingClientRect();
  • rectObject.top:元素上边到视窗上边的距离;
  • rectObject.right:元素右边到视窗左边的距离;
  • rectObject.bottom:元素下边到视窗上边的距离;
  • rectObject.left:元素左边到视窗左边的距离;
  • rectObject.width:是元素自身的宽
  • rectObject.height是元素自身的高
function isInViewPortOfTwo(el) {
  const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  const top = el.getBoundingClientRect() && el.getBoundingClientRect().top
  console.log('top', top)
  return top <= viewPortHeight + 100
}
目录
相关文章
|
JavaScript
盘点JS判断空对象的几大方法
在盘点JS判空方法之前我们先来了解下面的三个方法。
193 2
盘点JS判断空对象的几大方法
|
JavaScript 前端开发
JavaScript判断各种资源是否加载完成的方法汇总,资源预加载问题
JavaScript判断各种资源是否加载完成的方法汇总,资源预加载问题
939 0
|
算法 JavaScript 前端开发
判断链表中是否又环使用JavaScript解决算法问题
判断链表中是否又环使用JavaScript解决算法问题
148 0
判断链表中是否又环使用JavaScript解决算法问题
|
JavaScript 索引 Python
JS 刷 Leetcode:303. 区域和检索 - 数组不可变
JS 刷 Leetcode:303. 区域和检索 - 数组不可变
JS 刷 Leetcode:303. 区域和检索 - 数组不可变
|
JavaScript
js条件逻辑判断-德摩根定律
在实际应用中经常会遇到js的大量逻辑判断,各种复杂的逻辑判断
136 0
js条件逻辑判断-德摩根定律
|
前端开发 JavaScript
【前端】【JavaScript】通过成绩判断等级
【前端】【JavaScript】通过成绩判断等级
152 0
【前端】【JavaScript】通过成绩判断等级
|
JavaScript
JS进阶-数据类型的判断方式以及转换方式的汇总
本文内容: 介绍了几种常用的数据类型判断方式,并且手写了一个通用的判断方法 强制类型转换和隐式类型转换的常用方法和规则,以及常见的面试题
121 0
|
JavaScript iOS开发
JS判断IOS系统版本
JS判断IOS系统版本
389 0
|
存储 JavaScript 前端开发
手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】
手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】
242 0
手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】