vue-amaze-scrollspy
v1.0.2
Published
vue vue-directive animation
Downloads
4
Readme
- babel
- eslint
打包发布npm
使用工具库lodash
vue指令的hook callback
- bind: 只调用一次,指令第一次绑定到元素时调用,可进行一次性到初始化设置
- inserted: 被绑定元素插入父节点时调用
- update:所在组件的VNode更新调用,
- componentUpdated: 指令所在的VNode及其子组件VNode全部更新后调用
- unbind: 只调用一次,指令与元素解绑时调用(怎么解绑)
intersectionObserverg构造函数 阮一峰的使用教程
- 浏览器原生提供的构造函数,构造函数接受两个参数:callback,
- 参数callback(entries, option):
- 一般会触发两次: 1.被观察目标进入视口时触发 2. 被观察目标完全离开视口时触发
- 参数entries是一个数组,每个成员都是一个IntersectionObserverEntry对象,
- entries数组里面的成员是怎么生成的: 如果同时有两个被观察的对象的可见性发生变化,entries数组就会有两个成员
- IntersectionObserverEntry对象
- target: 被观察的目标元素
- rootBounds: 根元素的矩形区域信息
- boundingClientRect: 目标元素的矩形区域信息
- intersectionRect: 目标元素与视口(或根元素)的交叉区域的信息
- intersectionRatio: 目标元素的可见比例,即intersectionRect / boundingClientRect,完全可见:1, 不可见: 0
- 参数 Option对象
- threshold: 规定了一个监听目标与边界交叉区域的比例值,决定了什么时候触发回掉函数,
- 可以是具体的数值
- 0.0 - 1.0之间的数组
- root: 指定目标元素所在容器节点(即跟元素)
- rootMargin: 跟元素的margin属性,用了扩大目标元素与根元素的交叉区域
- 实例方法
- observe(dom元素) 开始观察一个对象
- unobserve(element) 停止观察
- disconnect() 关闭观察器