简单了解下 IntersectionObserver的rootMargin！
创始人
2024-11-14 12:34:38
0次

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

    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比较多时，当滑到才渲染可能来不及，所以需要提前一段距离就开始渲染

示例源码

                   IntersectionObserver-rootMargin                
     
     
     初始化

上一篇：Qt5.15在线安装

下一篇：【JDK】JDK环境配置踩坑记录Mac

相关内容

热门资讯

微信炸金花房卡有没有购买/微信... 炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:8488009许多玩家在游戏中会购买房卡来享受...
终于找到“微信炸金花链接在哪里... 微信炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:86909166许多玩家在游戏中会购买房卡...
微信炸金花房卡链接在哪弄的/怎... 炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:33903369许多玩家在游戏中会购买房卡来享...
正版授权“微信牛牛房卡客服微信... 九酷大厅是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:44346008许多玩家在游戏中会购买房卡来...
微信玩链接炸金花房卡/战皇大厅... 炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:55051770许多玩家在游戏中会购买房卡来享...
买房卡的链接炸金花房卡/微信斗... 炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:8488009许多玩家在游戏中会购买房卡来享受...
一分钟了解“牛牛房卡哪里有卖的... 起点大厅是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:86909166许多玩家在游戏中会购买房卡来...
微信群牛牛房卡怎么买/新九天大... 斗牛是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:33903369许多玩家在游戏中会购买房卡来享受...
房卡必备教程“微信牛牛房卡在哪... 新全游牛牛是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:15984933许多玩家在游戏中会购买房卡...
微信群链接拼三张房卡/新518... 拼三张是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:55051770许多玩家在游戏中会购买房卡来享...
一分钟推荐“炸金花房卡链接怎么... 金牛座金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:86909166许多玩家在游戏中会购买房卡...
微信里面炸金花房卡在哪买/新蓝... 炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:8488009许多玩家在游戏中会购买房卡来享受...
一分钟了解“哪里有卖微信炸金花... 微信炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:44346008许多玩家在游戏中会购买房卡...
在哪里买斗牛微信房卡/茄子娱乐... 斗牛是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:33903369许多玩家在游戏中会购买房卡来享受...
正版授权“牛牛房卡哪里有卖的”... 牛牛是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:86909166许多玩家在游戏中会购买房卡来享受...
炸金花房卡链接在哪弄的/牛牛房... 炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:55051770许多玩家在游戏中会购买房卡来享...
微信炸金花房卡如何购买/悟空大... 炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:8488009许多玩家在游戏中会购买房卡来享受...
一分钟了解“炸金花房卡专卖店联... 新神盾是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:15984933许多玩家在游戏中会购买房卡来享...
微信炸金花房间怎么弄/新皇豪大... 炸金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:33903369许多玩家在游戏中会购买房卡来享...
ia实测“微信金花群怎么买房卡... 金花是一款非常受欢迎的棋牌游戏，咨询房/卡添加微信:44346008许多玩家在游戏中会购买房卡来享受...