IntersectionObserver判断是否在可视区域详解

目录
  • 前言
  • 概念
  • 使用
  • 注意

前言

在日常的开发过程中，有时候会有一些要求判断节点是否进入可视化区域的需求。例如：判断信息是否在可视区域曝光再进行曝光，图片懒加载等。通常我们可以通过scroll和getBoundingclient来进行判断。

el.offsetTop - document.documentElement.scrollTop <= 视口高度
// 或
el.getBoundingClientRect().top <= 视口高度

但是scroll，getBoundingclient会引起回流，计算过于频繁可能会引起很大的性能问题，例如用户在使用的过程中，滑动卡顿啊等。那么有没有更好的办法来代替判断是否进入可视化区域呢？使用IntersectionObserver即可解决这种烦恼。

概念

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。浏览器显示页面的时候，首先会用js处理逻辑，然后进行样式计算及布局，在内存里面形成之后会画我们的屏幕上去，这一个过程就叫1帧，如果1帧中任一个阶段占用的时间过长，就会影响到我们的平均帧率，导致掉帧等。而IntersectionObserver会在浏览器空闲的时候，也就是帧空闲的时候才去执行，不会一直占用我们的主线程，从而提高了性能及体验。

使用

IntersectionObserver接收2个参数callback和options。具体可见MDN

<!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>Document</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            border: 1px salmon solid;
            overflow-y: scroll;
        }
        .box2 {
            width: 100px;
            height: 1000px;
            background: red;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3" id="box3"></div>
    </div>
    <script>
        let options = {
            root: document.querySelector('#box1'),
            rootMargin: '0px',
            threshold: 1.0
        }
        let callback = (entries, observer) => {
            entries.forEach(entry => {
                // entry.boundingClientRect
                // 目标元素的区域信息，getBoundingClientRect()的返回值
                // entry.intersectionRatio
                // 目标元素的可见比例
                // entry.intersectionRect
                // 目标元素与根元素交叉的区域信息
                // entry.isIntersecting
                // 目标元素是否进入根元素区域
                // entry.rootBounds
                // 根元素的矩形区域信息
                // entry.target
                // 被观察dom节点
                // entry.time
                // 相交发生时距离页面打开时的毫秒数
            });
        };
        let observer = new IntersectionObserver(callback, options);
        let target = document.querySelector('#box3');
        observer.observe(target);
    </script>
</body>
</html>

浏览器兼容性

不兼容Safari 12.1以下和Firefox for Android 55以下，具体可以看MDN。 可以使用polyfill版解决该问题。

注意

当target元素已在root可视范围，但是被其他元素遮盖住了，该target是否被其他元素遮盖不可判断。

以上就是IntersectionObserver判断是否在可视区域详解的详细内容，更多关于IntersectionObserver 判断可视区域的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 交叉观察器 IntersectionObserver用法详解

    目录 1. 背景 2. 兼容性 3. 用法 3.1 observe 3.2 unobserve 3.3 disconnect 3.4 takeRecords 注意: 4. callback 参数 5. IntersectionObserverEntry 对象 6. 应用 注意点 1. 背景 网页开发时,不管是在移动端,还是PC端,都有个很重要的概念,叫做动态懒加载,适用于一些图片资源(或者数据)特别多的场景中,这个时候,我们常常需要了解某个元素是否进入了“视口”(viewport),即用户能不能

  • 可视化埋点平台元素曝光采集intersectionObserver思路实践

    目录 正文 设计方案 测验结论 完整的伪代码 正文 最近一直在开发可视化埋点系统,其中元素的曝光埋点,就是借助了 intersectionObserver 这个原生 api.也是网上推荐度比较高的方案,同时 2022 年,该 api 兼容性也已经很高,同时也有 polyfill,基本上使用无虞. intersectionObserver 本身 api 非常简单,但是在实际使用的过程中,由于可视化埋点的一些特殊性以及对埋点准确性的要求,还是遇到了一些 dom 变更后的边缘场景,本文便是对这些边缘场

  • 利用IntersectionObserver实现动态渲染的示例详解

    目录 前言 实现 懒加载组件 长列表组件示意 测试 前言 开发表格时,希望支持可视后的动态加载.在查找资料做了一些尝试后,最终使用IntersectionObserver,相对方便地实现了该功能 IntersectionObserver诞生已经有几年了,所以它的兼容性目前已经达到可以使用的程度了.具体兼容程度以及详细API可参考CDN 实现 懒加载组件 核心就是利用了IntersectionObserver的能力,封装了LazyContainer组件,该组件的children,只有在视口中可见时

  • 判断颜色是否合法的正则表达式(详解)

    "^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$"; 意思是:以#开头,后面是数字和a-f的字符(大写或小写),这个值是6位或3位.要匹配一个3为是为了符合css颜色的简写规则: "#abc"=="#aabbcc" 注意:如果需要进行16位和10位的转换,比如将颜色值转成int存在数据库,如果是6位的颜色没问题,如果是3位的颜色就有问题了,因为当你取回来从10进制转为 16进制的时候,你不知道他应该是3位还是6位. 比如:#

  • Android中判断网络是否连接实例详解

    Android中判断网络是否连接实例详解 在android中,如何监测网络的状态呢,这个有的时候也是十分重要的,方法如下: public class ConnectionDetector { private Context _context; public ConnectionDetector(Context context){ this._context = context; } public boolean isConnectingToInternet(){ ConnectivityMana

  • 基于python if 判断选择结构的实例详解

    代码执行结构为顺序结构.选择结构.循环结构. python判断选择结构[if] if 判断条件 #进行判断条件满足之后执行下方语句 执行语句 elif 判断条件 #在不满足上面所有条件基础上进行条件筛选匹配之后执行下方语句 执行语句 else #再不满足上面所有的添加下执行下方语句 执行语句 下面举一个简单的例子,看兜里有多少钱来决定吃什么饭. douliqian=2 if douliqian>200: print("小龙虾走起!!0.0") elif douliqian>

  • linux shell脚本对未定义变量的判断以及if的用法详解

    环境 操作系统:win10 虚拟机:centos7 需求 因为公司有个脚本,是用于启动程序的,但是每次启动都要手动做如下两个操作: ①先查询之前的进程ID ②杀死之前的,在启动新了 时间长了弄得我很烦躁,所以就琢磨下,把上面的的操作一起整合到启动脚本里去. 最开始我是这么写的: #!/bin/bash echo "ggjob-search..." pid=`ps -ef|grep -w ggjob-search|grep -v grep|grep -v ggjob-search.sh|

  • TypeScript判断对称的二叉树方案详解

    TypeScript判断对称的二叉树方案详解

    目录 前言 实现思路 实现代码 示例代码 前言 如果一颗二叉树和它的镜像一样,那么它就是对称的.实现一个函数用于判断一颗二叉树是否对称,你会怎么做? 本文将分享一种解决方案,欢迎各位感兴趣的开发者阅读本文. 实现思路 在上一篇文章二叉树的镜像中我们知道了此问题的解决方案是前序遍历,那么我们可以修改下前序遍历算法,父节点遍历后,先遍历它的右子节点,再遍历它的左子节点,我们把这种算法称为:对称前序遍历 如下图所示的两棵树,我们分别列举下两种遍历的结果: 树A: 前序遍历:8, 6, 5, 7, 6,

  • ThinkPHP模板判断输出Empty标签用法详解

    ThinkPHP模板的empty标签用于判断模板变量是否为空值. ThinkPHP模板empty标签用来判断模板变量是否为空值,其功能相当于PHP中的empty()函数行为.empty标签使用格式如下: <empty name="变量名">要输出的内容</empty> 具体用法如下例所示: <empty name="username">username 为空值</empty 该例子等同于: <?php if(empty

  • android 判断横竖屏问题的详解

    Android横竖屏要解决的问题应该就两个:一.布局问题:二.重新载入问题.1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 AndroidManifest.xml中找到你所指定的activity中加上android:screenOrientation属性,他有以下几个参数:"unspecified" 默认值 由系统来判断显示方向.判定的策略是和设备相关的,所以不同的设备会有不同的显示方向. "landscape" 横屏显示(宽比高要长) &q

  • ThinkPHP模板判断输出Defined标签用法详解

    ThinkPHP模板引擎的defined标签用于判断常量是否已经被定义. ThinkPHP的defined标签用来判断常量是否已经被定义,其功能相当于PHP中的defined()函数.defined标签用法如下: <present name="常量">要输出的内容</present> 先在模块操作(如:Index/display )里定义一个常量并输出模板: define("SITE_NAME", "我们"); $this

  • ThinkPHP模板判断输出Present标签用法详解

    ThinkPHP模板的present标签用于判断模板变量是否已经赋值. ThinkPHP模板引擎的present标签用来判断模板变量是否已经赋值,其功能相当于PHP中的isset()函数行为,格式如下: <present name="变量名">要输出的内容</present> 用法举例如下: <present name="username">{$username} 你好!</present> 该例子等同于: if(is

随机推荐