IntersectionObserver.IntersectionObserver() - Web API 接口参考 编辑
IntersectionObserver()
构造器创建并返回一个IntersectionObserver
对象。 如果指定rootMargin
则会检查其是否符合语法规定,检查阈值以确保全部在0.0到1.0之间,并且阈值列表会按升序排列。如果阈值列表为空,则默认为一个[0.0]的数组。
语法
var observer = new IntersectionObserver(callback[, options]);
参数
callback
- 当元素可见比例超过指定阈值后,会调用一个回调函数,此回调函数接受两个参数:
entries
- 一个
IntersectionObserverEntry
对象的数组,每个被触发的阈值,都或多或少与指定阈值有偏差。 observer
- 被调用的
IntersectionObserver
实例。
options
可选- 一个可以用来配置observer实例的对象。如果
options
未指定,observer实例默认使用文档视口作为root,并且没有margin,阈值为0%(意味着即使一像素的改变都会触发回调函数)。你可以指定以下配置:root
- 监听元素的祖先元素
Element
对象,其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。 rootMargin
- 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量,类型为字符串(string) ,可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和CSS 中的
margin
属性等同; 可以参考 The root element and root margin in Intersection Observer API来深入了解margin的工作原理及其语法。默认值是"0px 0px 0px 0px"。 threshold
- 规定了一个监听目标与边界盒交叉区域的比例值,可以是一个具体的数值或是一组0.0到1.0之间的数组。若指定值为0.0,则意味着监听元素即使与根有1像素交叉,此元素也会被视为可见. 若指定值为1.0,则意味着整个元素都是可见的(此段英文原文直译,正确性有待验证) 。可以参考Thresholds in Intersection Observer API 来深入了解阈值是如何使用的。阈值的默认值为0.0。
返回值
一个可以使用规定阈值监听目标元素可见部分与root
交叉状况的新的IntersectionObserver
实例。调用自身的observe()
方法开始使用规定的阈值监听指定目标。
异常
SyntaxError
- 指定的
rootMargin
不存在。 - RangeError
- 一个或多个阈值超出了0.0到1.0的范围。
规范
规范 | 状态 | Comment |
---|---|---|
Intersection Observer IntersectionObserver constructor | Working Draft | Initial definition. |
浏览器兼容
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论