IntersectionObserver.IntersectionObserver()

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

IntersectionObserver()构造器创建并返回一个IntersectionObserver对象。 检查rootMargin(如果指定)是否符合语法规定,检查所有指定的阈值(thresholds)是否在0.0和1.0之间,并且阈值列表会按升序排列。如果阈值列表为空,则默认为一个[0.0]的数组(Array).

语法

var observer = new IntersectionObserver(callback[, options]);

参数

callback
当元素可见比例超过指定阈值后,会调用一个回调函数,此回调函数接受两个参数:
entries
一个IntersectionObserverEntry对象列表(list),每个被触发的阈值,都会较指定阈值有偏差(或超出或少于指定阈值)。
observer
被调用的IntersectionObserver实例。
options 可选
一个可以用来配置observer实例的对象。如果options未指定,observer实例默认使用viewport作为根(root),并且没有margin, 阈值为0% (意味着即使一像素的改变都会触发回调函数)。你可以指定以下配置:
root
监听元素的祖先元素Element对象,其边界盒将被视作viewport。目标在根的可见区域的的任何不可见部分都会被视为不可见。
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.

返回值

一个可以使用规定阈值(thresholds)监听目标元素可见部分与根(root)交叉状况的IntersectionObserver 实例。调用自身的observe() 方法开始使用规定的阈值监听指定目标。

异常

SyntaxError
指定的rootMargin不存在。
RangeError
一个或多个阈值超出了0.0到1.0的范围。

规范

规范 状态 Comment
Intersection Observer
IntersectionObserver constructor
Working Draft Initial definition.

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera ? Safari ? WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

文档标签和贡献者

此页面的贡献者: SolitudeRA
最后编辑者: SolitudeRA,