一文教你如何准确判断元素是否在可视区域！

最新推荐文章于 2024-06-18 10:41:36 发布

明明就1234

最新推荐文章于 2024-06-18 10:41:36 发布

阅读量513

点赞数 10

文章标签：前端 javascript chrome

本文链接：https://blog.csdn.net/weixin_59900968/article/details/135084336

版权

一文教你如何准确判断元素是否在可视区域！

getBoundingClientRect

getBoundingClientRect

用法

	let domRect = dom.getBoundingClientRect();
	DOMRect：{
　　x/left：视图原点（左上角）距离dom左边框距离，
　　y/top：视图原点（左上角）距离dom上边框距离，
    right：视图原点（左上角）距离dom右边框距离，
    bottom：视图原点（左上角）距离dom底边框距离，
    width：dom的宽度，标准盒模型，width = 宽度+padding+border；怪异盒模型，width = 设置的宽度，
    height：dom的高度，
}

所以我们可以根据DOMRect的中的各个属性来判断dom是否在可视区域内。

eg:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>getBoundingClientRect可视区域</title>
  <style>
    * {
      margin: 0
    }
    .circle-wrap {
      position: fixed;
      top: 50px;
      right: 50px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 140px;
      background: #fff;
    }

    .circle-wrap .circle {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: red;
    }

    .card-wrap {
      height: 2000px;
      width: 3000px;
      margin-top: 100px;
    }

    .card-wrap .card {
      width: 200px;
      height: 200px;
      padding: 20px;
      box-sizing: border-box;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-top: 500px;
      margin-left: 500px;
    }
  </style>
</head>

<body>
  <div class="circle-wrap">
    <span>当下方的卡片在可视区域内，我的圈圈是绿色，否则是红色</span>
    <span class="circle"></span>
  </div>
  <div class="card-wrap">
    <div class="card">我是一个卡片</div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.js"></script>
  <script>
    const card = document.querySelector(".card");
    const circle = document.querySelector(".circle");
    const getBoundingClientRectJudge = () => {
      let domRect = card.getBoundingClientRect();
      console.log(domRect)
      let ch = document.documentElement.clientHeight;
      let cw = document.documentElement.clientWidth;
      let isInsert = true;
      if (domRect.bottom < 0 || domRect.top > ch || domRect.right < 0 || domRect.left > cw) {
        isInsert = false;
      }
      let background = null
      if (isInsert) {
        background = "green" //可视内
      } else {
        background = "red"  //非可视内
      }
      circle.style.background = background
    }
    window.addEventListener("scroll", _.throttle(getBoundingClientRectJudge, 500))
    getBoundingClientRectJudge()
  </script>
</body>

</html>