简单了解下 IntersectionObserver的rootMargin!

看到蛮多写IntersectionObserver的博客的,但是感觉里面关键部分都介绍的模棱两可,所以我来简单说说这个。至于什么是IntersectionObserver,官网上有 IntersectionObserver,我就不去一一阐述了,下面说最关键的点和使用场景!

javascript 复制代码
    new IntersectionObserver(
        function (entries) {
          // entries[0].isIntersecting
        },
        {
          rootMargin: "0px 0px 0px 0px"
        }
      )

关键点

设置上边距,当前元素的下边框监测会更早出现更晚消失。

设置下边距,当前元素的上边框监测会更早出现更晚消失。

并且rootMargin必须要设置px或者百分比,这百分比是相对视口高度来说的,所以说一般建议使用px,如:"30px 0px 0px 0px" 或者 "10% 0px 0px 0px",必须要带px,不能只写数值否则无效

场景

有预懒加载的地方大概率会使用到IntersectionObserver,比如向上滑动时,如果图片或者其他dom比较多时,当滑到才渲染可能来不及,所以需要提前一段距离就开始渲染

示例源码

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IntersectionObserver-rootMargin</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .white-dom {
        height: 710px;
      }
      #target {
        background: rgb(237, 28, 36);
        height: 100px;
        outline: 33px solid rgba(0, 0, 0, 0.2);
      }
      #info {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="white-dom"></div>
    <div id="target"></div>
    <div class="white-dom"></div>
    <span id="info">初始化</span>
    <script>
      const io = new IntersectionObserver(
        function (entries) {
          console.log('IntersectionObserver触发');
          document.getElementById("info").innerHTML = entries[0].isIntersecting
            ? "元素显示"
            : "元素隐藏";
        },
        {
          rootMargin: "0px 0px 33px 0px"
        }
      );
      io.observe(document.getElementById("target"));
    </script>
  </body>
</html>
相关推荐
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖5 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121386 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css