JS判断元素是否在可视区域

作者:admin   时间:2022-07-16   访问量:279

  释义:Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

  如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和。

  如果box-sizing: border-box,元素的的尺寸等于 width/height。

  const rectObject = object.getBoundingClientRect();
  const {left,top,right,bottom}=rectObject;

  1、rectObject.top:元素上边到视窗上边的距离;

  2、rectObject.right:元素右边到视窗左边的距离;

  3、rectObject.bottom:元素下边到视窗上边的距离;

  4、ectObject.left:元素左边到视窗左边的距离;

  //判断元素是否在可视区范围
  function isEleVisible(ele){
      var {top, right, bottom, left} = ele.getBoundingClientRect()
      var w = window.innerWidth
      var h = window.innerHeight
      if(bottom < 0 || top > h){
          // y 轴方向
          return false
      }
      if(right < 0 || left > w){
          // x 轴方向
          return false
      }
      return true
  }


【地址】:http://www.inseo.cn/seo/173.html转载请注明出处


相关文章

Copyright © 2018-2030 大树SEO All Rights Reserved.