From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/api/intersectionobserver/index.html | 98 ++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/zh-cn/web/api/intersectionobserver/index.html (limited to 'files/zh-cn/web/api/intersectionobserver/index.html') diff --git a/files/zh-cn/web/api/intersectionobserver/index.html b/files/zh-cn/web/api/intersectionobserver/index.html new file mode 100644 index 0000000000..1458e5c459 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/index.html @@ -0,0 +1,98 @@ +--- +title: Intersection Observer +slug: Web/API/IntersectionObserver +tags: + - API + - Experimental + - Interface + - Intersection Observer API + - IntersectionObserver + - Reference + - observers +translation_of: Web/API/IntersectionObserver +--- +
{{APIRef("Intersection Observer API")}}
+ +

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗({{Glossary('viewport')}})交叉状态的方法。祖先元素与视窗({{Glossary('viewport')}})被称为根(root)。

+ +

当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

+ +

构造器

+ +
+
{{domxref("IntersectionObserver.IntersectionObserver()")}}
+
创建一个新的IntersectionObserver对象，当其监听到目标元素的可见部分穿过了一个或多个阈(thresholds)时，会执行指定的回调函数。
+
+ +

属性

+ +
+
{{domxref("IntersectionObserver.root")}} {{readonlyinline}}
+
所监听对象的具体祖先元素({{domxref("element")}})。如果未传入值或值为null，则默认使用顶级文档的视窗。
+
{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
+
计算交叉时添加到根(root)边界盒{{Glossary('bounding box')}}的矩形偏移量， 可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用像素(pixel)(px)或百分比(percentage)(%)来表达, 默认值为"0px 0px 0px 0px"。
+
{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
+
一个包含阈值的列表, 按升序排列, 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知(Notification)。如果构造器未传入值, 则默认值为0。
+
+ +

方法

+ +
+
{{domxref("IntersectionObserver.disconnect()")}}
+
使IntersectionObserver对象停止监听工作。
+
{{domxref("IntersectionObserver.observe()")}}
+
使IntersectionObserver开始监听一个目标元素。
+
{{domxref("IntersectionObserver.takeRecords()")}}
+
返回所有观察目标的{{domxref("IntersectionObserverEntry")}}对象数组。
+
{{domxref("IntersectionObserver.unobserve()")}}
+
使IntersectionObserver停止监听特定目标元素。
+
+

示例

+
+
+ +
var intersectionObserver = new IntersectionObserver(function(entries) {
+  // If intersectionRatio is 0, the target is out of view
+  // and we do not need to do anything.
+  if (entries[0].intersectionRatio <= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// start observing
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}{{Spec2('IntersectionObserver')}} 
+ +

浏览器兼容

+ + + +

{{Compat("api.IntersectionObserver")}}

+ +

参考

+ + + +

 

-- cgit v1.2.3-54-g00ecf