脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript判断元素是否在可视区域

JavaScript判断元素是否在可视区域的三种方法

 更新时间：2023年12月07日 09:58:27   作者：WebGirl  
这这篇文章给大家总结了JavaScript判断元素是否在可视区域的三种方法,getBoundingClientRect,IntersectionObserver和offsetTop、scrollTop这三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下

方法1：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>

效果图：

问题

getBoundingClientRect并不能满足所有情况，甚至说，它只能满足一种情况的判断，那就是需要判断的那个dom节点，它只身处在一个滚动条的情况下。什么意思呢，就是它所有的祖先节点，加起来的滚动条只有1个，如果它父节点有滚动条，父父节点也有滚动条，那这种方法就不好用了，请看示例：

下面展示的结果是错误的，圈圈应该是红色才对。

<!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
    }

    body {
      height: 2000px;
      width: 3000px;
    }

    .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: 400px;
      width: 600px;
      margin-top: 100px;
      margin-left: 100px;
      border: 1px solid green;
      overflow: auto;
    }

    .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;
    }

    .head {
      width: 100%;
      height: 100px;
      background: pink;
      /* position: fixed; */
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <!-- <div class="head"></div> -->
  <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();
      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>

由此，我们引出第二种方法，IntersectionObserver。

方法2：IntersectionObserver

用法

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
    }

    body {
      height: 2000px;
      width: 3000px;
    }

    .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: 400px;
      width: 600px;
      margin-top: 100px;
      margin-left: 100px;
      border: 1px solid green;
      overflow: auto;
    }

    .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;
    }
    .head{
      width: 100%;
      height: 100px;
      background: pink;
      /* position: fixed; */
      top:0;
      left: 0;
    }
  </style>
</head>

<body>
  <!-- <div class="head"></div> -->
  <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 observer = new IntersectionObserver((changes) => {
      // changes是数组
      changes.forEach(one => {
        console.log(one)
        let isIntersecting = one.isIntersecting
        let background = null
        if (isIntersecting) {
          background = "green"
        } else {
          background = "red"
        }
        circle.style.background = background
      })
    })
    observer.observe(card)
    // console.log(observer)
    /* 取消观察特定的元素：observer.unobserve(dom) */
    /* 对象停止监听目标 observer.disconnect() */
  </script>
</body>

</html>

补充说明

IntersectionObserver可以传root,进一步判断dom是相对于哪个节点，来判断是否在可视区域内，默认root是document。

const observer = new IntersectionObserver((changes) => {
      console.log(changes)
      changes.forEach(one => {
        console.log(one)
        let isIntersecting = one.isIntersecting
        let background = null
        if (isIntersecting) {
          background = "green"
        } else {
          background = "red"
        }
        circle.style.background = background
      })
    },{root:document.querySelector(".card-wrap")})

方法3：offsetTop、scrollTop

说明

  • offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离，其他方向相同
  • offsetWidth:元素两端算上外边框的宽度，其他方向相同
  • scrollLeft 和 scrollTop:既可以确定当前元素的滚动状态，也可以设置元素的滚动位置
  • scrollWidth 和 scrollHeight:确定元素内容的实际大小
  • clientWidth:元素内容区宽度加上左右内边距宽度，即clientWidth = content + padding
  • clientHeight:元素内容区高度加上上下内边距高度，即clientHeight = content + padding

使用

公式：

0 <= el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

写法：

function isInViePortOfOne(el){
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight
    const offsetTop = el.offsetTop;
    const scollTop = document.documentElement.scrollTop
    const top = offsetTop - scollTop;
    return top <= viewPortHeight && top >= 0
}

以上就是JavaScript判断元素是否在可视区域的三种方法的详细内容，更多关于JavaScript判断元素是否在可视区域的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • javascript十个最常用的自定义函数(中文版)

    javascript十个最常用的自定义函数(中文版)

    如果不使用类库或者没有自己的类库，储备一些常用函数总是有好处的。
    2009-09-09
  • JS实现的数组全排列输出算法

    JS实现的数组全排列输出算法

    这篇文章主要介绍了JS实现的数组全排列输出算法,实例分析了全排列的原理与相关的javascript实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 一款好用的移动端滚动插件BetterScroll

    一款好用的移动端滚动插件BetterScroll

    BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件，用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景，感兴趣的一起来了解一下
    2021-09-09
  • JS中比较冷门但非常好用的方法总结

    JS中比较冷门但非常好用的方法总结

    在Js中有一些比较冷门但是非常好用的方法，我在这里称之为高级方法，这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题，不是所有的浏览器都读得懂的，这篇文章主要就是对这些方法做一个总结，让我们一起来看一下吧
    2023-06-06
  • 6种JavaScript判断对象自身为空的方法小结

    6种JavaScript判断对象自身为空的方法小结

    这篇文章主要为大家详细介绍了6种JavaScript判断对象自身为空的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • 图片上传插件jquery.uploadify详解

    图片上传插件jquery.uploadify详解

    如果页面没有显示“BROWSE”按钮，则说明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不对，检查下路径是否正确
    2013-11-11
  • JS实现用户注册界面功能

    JS实现用户注册界面功能

    这篇文章主要为大家详细介绍了JS实现用户注册界面功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Bootstrap树形控件使用方法详解

    Bootstrap树形控件使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    ES6(ECMAScript 6)新特性之模板字符串用法分析

    这篇文章主要介绍了ES6(ECMAScript 6)新特性之模板字符串用法,简单介绍了ES6模板字符串的概念、功能并结合实例形式分析了ES6模板字符串的用法,需要的朋友可以参考下
    2017-04-04
  • 微信小程序实现注册登录功能(表单校验、错误提示)

    微信小程序实现注册登录功能(表单校验、错误提示)

    这篇文章主要介绍了微信小程序 实现注册、登录功能(表单校验、错误提示),本文通过代码给大家详细介绍，需要的朋友可以参考下
    2019-12-12

最新评论