From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/intersectionobserver/disconnect/index.html | 55 ++++++++++++ .../zh-cn/web/api/intersectionobserver/index.html | 98 ++++++++++++++++++++++ .../intersectionobserver/index.html | 73 ++++++++++++++++ .../api/intersectionobserver/observe/index.html | 64 ++++++++++++++ .../web/api/intersectionobserver/root/index.html | 90 ++++++++++++++++++++ .../api/intersectionobserver/rootmargin/index.html | 48 +++++++++++ .../intersectionobserver/takerecords/index.html | 60 +++++++++++++ .../api/intersectionobserver/thresholds/index.html | 52 ++++++++++++ .../api/intersectionobserver/unobserve/index.html | 69 +++++++++++++++ 9 files changed, 609 insertions(+) create mode 100644 files/zh-cn/web/api/intersectionobserver/disconnect/index.html create mode 100644 files/zh-cn/web/api/intersectionobserver/index.html create mode 100644 files/zh-cn/web/api/intersectionobserver/intersectionobserver/index.html create mode 100644 files/zh-cn/web/api/intersectionobserver/observe/index.html create mode 100644 files/zh-cn/web/api/intersectionobserver/root/index.html create mode 100644 files/zh-cn/web/api/intersectionobserver/rootmargin/index.html create mode 100644 files/zh-cn/web/api/intersectionobserver/takerecords/index.html create mode 100644 files/zh-cn/web/api/intersectionobserver/thresholds/index.html create mode 100644 files/zh-cn/web/api/intersectionobserver/unobserve/index.html (limited to 'files/zh-cn/web/api/intersectionobserver') diff --git a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html new file mode 100644 index 0000000000..6e1d89fd76 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html @@ -0,0 +1,55 @@ +--- +title: IntersectionObserver.disconnect() +slug: Web/API/IntersectionObserver/disconnect +tags: + - API + - Disconnect + - IntersectionObserver + - Method +translation_of: Web/API/IntersectionObserver/disconnect +--- +
{{APIRef("Intersection Observer API")}}
+ +
 {{domxref("IntersectionObserver")}} 的disconnect()方法终止对所有目标元素可见性变化的观察。
+ +

语法

+ +
IntersectionObserver.disconnect();
+ +

参数

+ +

None.

+ +

返回值

+ +

undefined.

+ +

说明

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}}{{Spec2('IntersectionObserver')}}Initial definition.
+ +

浏览器兼容性 

+ + + +

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

+ +

See also

+ + 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")}}

+ +

参考

+ + + +

 

diff --git a/files/zh-cn/web/api/intersectionobserver/intersectionobserver/index.html b/files/zh-cn/web/api/intersectionobserver/intersectionobserver/index.html new file mode 100644 index 0000000000..5b82d15297 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/intersectionobserver/index.html @@ -0,0 +1,73 @@ +--- +title: IntersectionObserver.IntersectionObserver() +slug: Web/API/IntersectionObserver/IntersectionObserver +translation_of: Web/API/IntersectionObserver/IntersectionObserver +--- +
{{APIRef("Intersection Observer API")}}
+ +

IntersectionObserver()构造器创建并返回一个{{domxref("IntersectionObserver")}}对象。 如果指定rootMargin则会检查其是否符合语法规定，检查阈值以确保全部在0.0到1.0之间，并且阈值列表会按升序排列。如果阈值列表为空，则默认为一个[0.0]的数组。

+ +

语法

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

参数

+ +
+
callback
+
当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数： +
+
entries
+
一个{{domxref("IntersectionObserverEntry")}}对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。
+
observer
+
被调用的{{domxref("IntersectionObserver")}}实例。
+
+
+
options {{optional_inline}}
+
一个可以用来配置observer实例的对象。如果options未指定，observer实例默认使用文档视口作为root，并且没有margin，阈值为0%（意味着即使一像素的改变都会触发回调函数）。你可以指定以下配置： +
+
root
+
监听元素的祖先元素{{domxref("Element")}}对象，其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。
+
rootMargin
+
一个在计算交叉值时添加至根的边界盒({{Glossary('bounding_box')}})中的一组偏移量，类型为字符串(string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和CSS 中的{{cssxref("margin")}} 属性等同; 可以参考 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解margin的工作原理及其语法。默认值是"0px 0px 0px 0px"。
+
threshold
+
规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数组。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都是可见的(此段英文原文直译，正确性有待验证) 。可以参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}} 来深入了解阈值是如何使用的。阈值的默认值为0.0。
+
+
+
+ +

返回值

+ +

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

+ +

异常

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

规范

+ + + + + + + + + + + + + + +
规范状态Comment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}{{Spec2('IntersectionObserver')}}Initial definition.
+ +

浏览器兼容

+ + + +

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

diff --git a/files/zh-cn/web/api/intersectionobserver/observe/index.html b/files/zh-cn/web/api/intersectionobserver/observe/index.html new file mode 100644 index 0000000000..fd9f581586 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/observe/index.html @@ -0,0 +1,64 @@ +--- +title: IntersectionObserver.observe() +slug: Web/API/IntersectionObserver/observe +translation_of: Web/API/IntersectionObserver/observe +--- +
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+ +

{{domxref("IntersectionObserver")}} 对象的observe() 方法向IntersectionObserver对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根， 但是可以监视多个目标元素，以查看这些目标元素可见区域的变化。调用{{domxref("IntersectionObserver.unobserve()")}}方法可以停止观察元素。

+ +

当指定元素的可见区域超过监听者的可见区域阈值之一时（阈值列表{{domxref("IntersectionObserver.thresholds")}}），监听者的回调会被传入代表当前发生的交叉变化{{domxref("IntersectionObserverEntry")}}并执行。请注意，这种设计允许通过调用一次回调，给回调传入IntersectionObserverEntry对象数组，来实现同时处理多个被监听元素的交叉变化。

+ +

语法

+ +
IntersectionObserver.observe(targetElement);
+ +

参数

+ +
+
targetElement
+
可见性区域被监控的元素{{domxref("element")}}。
+ 此元素必须是根元素的后代 (如果根元素为视窗，则该元素必须被当前文档包含)。
+
+ +

返回值

+ +

undefined.

+ +
+
+ +

Examples

+ +

<<<...>>>

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}{{Spec2('IntersectionObserver')}}Initial definition.
+ +
+

Browser compatibility

+ + + +

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

+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/intersectionobserver/root/index.html b/files/zh-cn/web/api/intersectionobserver/root/index.html new file mode 100644 index 0000000000..33804dad62 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/root/index.html @@ -0,0 +1,90 @@ +--- +title: IntersectionObserver.root +slug: Web/API/IntersectionObserver/root +translation_of: Web/API/IntersectionObserver/root +--- +

root 属性用来获取当前 intersectionObserver 实例的根元素。

+ +

语法

+ +
intersectionObserver.root;
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Initial definition
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(51.0)}}{{CompatNo}}[1]{{CompatNo}}[2]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(51.0)}}{{CompatNo}}[2]{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(51.0)}}
+
+ +

[1]  实现于 Windows Insider Preview Build 14986。

+ +

[2] 实现于 {{geckoRelease("53.0")}}，但默认处于关闭状态，需要打开dom.IntersectionObserver.enabled。

diff --git a/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html b/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html new file mode 100644 index 0000000000..dc5c913927 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html @@ -0,0 +1,48 @@ +--- +title: IntersectionObserver.rootMargin +slug: Web/API/IntersectionObserver/rootMargin +translation_of: Web/API/IntersectionObserver/rootMargin +--- +
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+ +

{{domxref("IntersectionObserver")}} 接口的只读属性rootMargin是与CSS属性{{cssxref("margin")}}语法相似的字符串(string)对象. 在交叉检测开始之前，由rootMargin规定的矩形的每一边都会被添加至{{domxref("IntersectionObserver.root", "root")}}元素的边框盒({{Glossary("bounding box")}})的相应边。例如，这可以让你向外调整边界，使得目标元素被认为是100%可见的，即使此元素得一部分长或宽被裁剪，或者在边缘过于靠近根边框盒边界的情况下，将目标视为部分隐藏。

+ +

可参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解root margin的工作原理或如何使其与根的边框盒进行协同工作。

+ +

语法

+ +
var marginString = IntersectionObserver.rootMargin;
+
+ +

值

+ +

一个字符串, 形式与CSS {{cssxref("margin")}}属性相似，包含了一条或一组根边框盒边的偏移量。这些偏移量会被添加至根边界盒与目标元素边界的交叉区域之前。

+ +

这个属性返回的字符串也许会与{{domxref("IntersectionObserver")}}被配置时所指定的值有所差别。浏览器可以改变这些值。

+ +

如果rootMargin在对象初始化的时候未被指定，它将被设置成默认值"0px 0px 0px 0px"，这将意味着在原根节点边界框与目标边界之间计算交叉值。  {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}} 描述了rootMargin的更加深入的使用方法。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}{{Spec2('IntersectionObserver')}}Initial definition
+ +
+

浏览器兼容

+ + + +

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

+
diff --git a/files/zh-cn/web/api/intersectionobserver/takerecords/index.html b/files/zh-cn/web/api/intersectionobserver/takerecords/index.html new file mode 100644 index 0000000000..b320df51f6 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/takerecords/index.html @@ -0,0 +1,60 @@ +--- +title: IntersectionObserver.takeRecords() +slug: Web/API/IntersectionObserver/takeRecords +translation_of: Web/API/IntersectionObserver/takeRecords +--- +
{{APIRef("Intersection Observer API")}}
+ +

{{domxref("IntersectionObserver")}} 的方法takeRecords() 返回一个 {{domxref("IntersectionObserverEntry")}} 对象数组, 每个对象的目标元素都包含每次相交的信息, 可以显式通过调用此方法或隐式地通过观察者的回调自动调用.

+ +
+

Note: 如果使用回调来监视这些更改，则无需调用此方法。调用此方法会清除挂起的相交状态列表，因此不会运行回调。

+
+ +

语法

+ +
intersectionObserverEntries = intersectionObserver.takeRecords();
+ +

参数

+ +

None.

+ +

返回值

+ +

 {{domxref("IntersectionObserverEntry")}} 对象数组, 每个对象包含目标元素与根每次的相交信息。

+ +
+
+ +

Examples

+ +

<<<...>>>

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-takeRecords','IntersectionObserver.takeRecords()')}}{{Spec2('IntersectionObserver')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/zh-cn/web/api/intersectionobserver/thresholds/index.html b/files/zh-cn/web/api/intersectionobserver/thresholds/index.html new file mode 100644 index 0000000000..22fa1f96d8 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/thresholds/index.html @@ -0,0 +1,52 @@ +--- +title: IntersectionObserver.thresholds +slug: Web/API/IntersectionObserver/thresholds +translation_of: Web/API/IntersectionObserver/thresholds +--- +
{{APIRef("Intersection Observer API")}}{{draft}}{{SeeCompatTable}}
+ +

The {{domxref("IntersectionObserver")}} interface's read-only thresholds property returns the list of intersection thresholds that was specified when the observer was instantiated with {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}. If only one threshold ratio was provided when instanitating the object, this will be an array containing that single value.

+ +

See {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}} to learn how thresholds work.

+ +

Syntax

+ +
var thresholds = IntersectionObserver.thresholds;
+
+ +

Value

+ +

An array of intersection thresholds, originally specified using the threshold property when instantiating the observer. If only one observer was specified, without being in an array, this value is a one-entry array containing that threshold. Regardless of the order your original threshold array was in, this one is always sorted in numerically increasing order.

+ +

If no threshold option was included when IntersectionObserver() was used to instantiate the observer, the value of thresholds is simply [0].

+ +
+

Be careful! Although the options object you can specify when creating an {{domxref("IntersectionObserver")}} has a field named {{domxref("IntersectionObserver.threshold", "threshold")}}, this property is called thresholds. Confusing? Yes. If you accidentally use thresholds as the name of the field in your options, the thresholds array will wind up being simply [0.0], which is likely not what you expect. Debugging chaos may ensue.

+
+ +

Examples

+ +

<<<...>>>

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}{{Spec2('IntersectionObserver')}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/zh-cn/web/api/intersectionobserver/unobserve/index.html b/files/zh-cn/web/api/intersectionobserver/unobserve/index.html new file mode 100644 index 0000000000..ba62faf1cd --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/unobserve/index.html @@ -0,0 +1,69 @@ +--- +title: IntersectionObserver.unobserve() +slug: Web/API/IntersectionObserver/unobserve +tags: + - API + - Intersection + - unobserve +translation_of: Web/API/IntersectionObserver/unobserve +--- +
unobserve()方法命令IntersectionObserver停止对一个元素的观察。
+ +

语法

+ +
IntersectionObserver.unobserve(target);
+ +

参数

+ +
+
target
+
要取消观察的目标，如果没有提供，方法不做任何事情，也不会抛出异常。
+
+ +

返回值

+ +

undefined.

+ +
+
+ +

例子

+ +

下面代码段展示了一个观察器被创建，一个元素被观察，以及取消观察的过程。

+ +
var observer = new IntersectionObserver(callback);
+observer.observe(document.getElementById("elementToObserve"));
+
+/* ... */
+
+observer.unobserve(document.getElementById("elementToObserve"));
+ +

说明

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}{{Spec2('IntersectionObserver')}}Initial definition.
+ +

浏览器兼容性

+ + + +

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

+ +

另请参阅

+ + -- cgit v1.2.3-54-g00ecf