首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    大白话详解Intersection Observer API

    大白话详解Intersection Observer API 昨天我写了Vue2 中自定义图片懒加载指令这篇博客,文章数据很好,阅读量可以上千,对于我这个刚写博客一周的新博主来说,是何等的荣幸。...1.Intersection Observer API 的基本介绍 Intersection Observer API提供了一种异步检测目标元素与祖先元素或视口(可统称为根元素)相交情况变化的方法。...1.1 Intersection Observer API 出现的原因 因为在如今网页开发的过程中,常常需要判断某个元素是否进入了"视口"(viewport),即用户能不能看到它。...1.2 Intersection observer 的重要概念 Intersection observer API 有以下五个重要的概念: 目标(target)元素 --- 我们要监听的元素 根(root...Intersection Observer API 的简单案列 大家可以在自己电脑运行一下下面的代码,会有更深的理解。 <!

    21810

    网页元素相交监测:Intersection Observer API

    API介绍 Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。...Intersection Observer API 会注册一个回调函数,每当被监视的元素进入或者退出另外一个元素时 (或者 viewport ),或者两个元素的相交部分大小发生变化时,该回调方法会被触发执行...注意 Intersection Observer API 无法提供重叠的像素个数或者具体哪个像素重叠,他的更常见的使用方式是——当两个元素相交比例在 N% 左右时,触发回调,以执行某些逻辑。...概念和用法  1.概念 Intersection Observer API 允许你配置一个回调函数,当以下情况发生时会被调用 每当目标 (target) 元素与设备视窗或者其他指定元素发生交集的时候执行...目标 (target) 元素与根 (root) 元素之间的交叉度是交叉比 (intersection ratio)。

    87720
    领券