使用 IntersectionObserver API 遇到的一些问题
root 设指定为 document.body
时不会触发更新
See the Pen document.body and IntersectionObserver by y1j2x34 (@y1j2x34)
on CodePen.
上面的示例中, 滚动页面后, .box
的颜色会随着交叉面积的比例更新而变化,如果将 , root: document
改为 root: document.body
, 会发现滚动页面后不会触发更新:
See the Pen IntersectionObserver(root=document.body) by y1j2x34 (@y1j2x34)
on CodePen.
MDN 关于 root
参数用法中描述了 root
是被监听目标的祖先元素, 很显然,这里的 document.body
也是每个 .box
的祖先元素,但是实际上不起作用。
还有一个现象,就是通过 document.body.addEventListener('scroll', listener)
方法无法监听到滚动事件, 我想这两个问题很可能是存在着某种关联关系,目前还没有找到相关资料可以说明缘由~~
See the Pen document.body.onscroll vs document.body.addEventListener('scroll', ...) by y1j2x34 (@y1j2x34)
on CodePen.
使用 IntersectionObserver API 遇到的一些问题的更多相关文章
- IntersectionObserver API
温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未 ...
- IntersectionObserver API 使用教程
转载:原文地址:http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html 网页开发时,常常需要了解某个元素是否进入了&q ...
- IntersectionObserver API,观察元素是否进入了可视区域
网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它. 上图的绿色方块不断滚动,顶部会提示它的可见性. 传统的实现方法是,监听到scroll事 ...
- IntersectionObserver API 使用教程(转载)
作者: 阮一峰 日期: 2016年11月 3日 网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它. 上图的绿色方块不断滚动,顶部会提示它的 ...
- js IntersectionObserver api
API const options = { root: null, threshold: [0, 0.5, 1], rootMargin: '30px 100px 20px' } var io = n ...
- 使用IntersectionObserver更高效的监视某个页面元素是否进入了可见窗口
比如说,你想跟踪 DOM 树里的一个元素,当它进入可见窗口时得到通知. 也许想实现即时延迟加载图片功能,或者你需要知道用户是否真的在看一个广告 banner. 你可以通过绑定 scroll 事件或者用 ...
- IntersectionObserver
创建对象 var io = new IntersectionObserver(callback, option); IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:c ...
- 使用IntersectionObserver制作滚动动画以及其他记录
前言 最近在重做公司项目的主页,正好新来了个UI,整个都重新设计了一下,动画还挺多的.我之前没有怎么玩过这些,踩了挺多坑,最后找到了目前而言最合适的方法,现在做一个记录. 需要把原来的主页从项目中抽出 ...
- 【分享】2017 开源中国新增开源项目排行榜 TOP 100
2017 年开源中国社区新增开源项目排行榜 TOP 100 新鲜出炉! 这份榜单根据 2017 年开源中国社区新收录的开源项目的关注度和活跃度整理而来,这份最受关注的 100 款开源项目榜单在一定程度 ...
- 9 月份 GitHub 上最火的 JavaScript 开源项目!
推荐 GitHub 上9 月份最受欢迎的 10 个 JavaScript 开源项目,在这些项目中,你有在用或用过哪些呢? 1.基于 Promise 的 HTTP 客户端 Axios https://g ...
随机推荐
- 当前工程中typescritpt依赖包与依赖包中依赖包类型不一致如何解决
在开发中,遇到文件中引入webpack,但是webpack.ICompiler不一致的情况 //import webpack from 'webpack'; import webpackHot fro ...
- axios进行图片上传
进行图片的上传,一定要注意headers的设置: headers:{"Content-Type":"multipart/form-data&quo ...
- 读取本地xml或json等本地文件报错Failed to load file:///D:/xml/test.xml: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
问题如上图: 原因及解析:在浏览器打开本地的html文件, 上面proxy中的url获取的就是一个本地文件, 协议是file://,如果是在服务器启动的话,则使用的是http或者https协议.出于安 ...
- linux搭建FastDFS文件服务器,安装nginx
本文主要介绍在linux服务器如何搭建FastDFS文件服务器.大概分为9个步骤,由于内容较为繁琐.下面带你入坑! 首先简单介绍一下FastDFS是淘宝资深架构师余庆老师主导开源的一个分布式文件系统, ...
- kali Linux--打开&关闭防火墙
1.安装ufw apt-get install ufw 2.关闭防火墙 ufw disable. 3.开启防火墙 ufw enable
- vue验证码倒计时60s
vue3验证码倒计时60s //倒计时60s const timeNum = ref(60); const countDown = ref(); const isShowSend = ref(true ...
- BASE64编码作业
BASE64编码作业 什么是BASE64编码 ase64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法.可查看RFC2045-RF ...
- 1.3 C语言--指针与结构体
指针 指针概念的引入 关于内存 程序有数据和指令组成,数据和指令在执行过程中存放在内存中.变量是程序数据中的一种,因此变量也存储在内存中:内存中的每个字节都有一个唯一的编码,即内存地址.32位机的内存 ...
- Typora初学
Markdown学习 TYPORA操作 Ctrl+Home 返回Typora顶部 Ctrl+End 返回Typora底部 Ctrl+T 创建表格 Ctrl+H 搜索并替换 Ctrl+Shift+M 公 ...
- bzoj 4817
LCT好题 首先我们考虑实际询问的是什么: 从LCT的角度考虑,如果我们认为一开始树上每一条边都是虚边,把一次涂色看作一次access操作,那么询问的实际就是两个节点间的虚边数量+1和子树中的最大虚边 ...