initial commit

9 files changed, 609 insertions, 0 deletions

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
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<div> {{domxref("IntersectionObserver")}} 的<code>disconnect()</code>方法终止对所有目标元素可见性变化的观察。</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>IntersectionObserver</em>.disconnect();</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>None.</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="说明">说明</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性 </h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.disconnect")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("IntersectionObserver.observe", "observe()")}}</li>
+ <li>{{domxref("IntersectionObserver.unobserve", "unobserve()")}}</li>
+</ul>
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
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary"><code><strong>IntersectionObserver</strong></code><strong>接口</strong> (从属于<a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a>) 提供了一种异步观察目标元素与其</span>祖先<span class="seoSummary">元素或顶级文档视窗({{Glossary('viewport')}})交叉状态的方法。</span>祖先元素与视窗({{Glossary('viewport')}})被称为<strong>根(root)。</strong></p>
+
+<p>当一个<span class="seoSummary"><code>IntersectionObserver</code></span>对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。</p>
+
+<h2 id="构造器">构造器</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd>创建一个新的<code>IntersectionObserver</code>对象，当其监听到目标元素的可见部分穿过了一个或多个<strong>阈(thresholds)</strong>时，会执行指定的回调函数。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>所监听对象的具体祖先元素({{domxref("element")}})。如果未传入值或值为<code>null</code>，则默认使用顶级文档的视窗。</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>计算交叉时添加到<strong>根(root)</strong>边界盒{{Glossary('bounding box')}}的矩形偏移量， 可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用<strong>像素(pixel)</strong>(<code>px</code>)或<strong>百分比(percentage)</strong>(<code>%</code>)来表达, 默认值为"0px 0px 0px 0px"。</dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>一个包含阈值的列表, 按升序排列, 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知(Notification)。如果构造器未传入值, 则默认值为0。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd>使<code>IntersectionObserver</code>对象停止监听工作。</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd><font face="Open Sans, arial, x-locale-body, sans-serif">使</font><code>IntersectionObserver</code>开始监听一个目标元素。</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>返回所有观察目标的{{domxref("IntersectionObserverEntry")}}对象数组。</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd><font face="Open Sans, arial, x-locale-body, sans-serif">使</font><code>IntersectionObserver</code>停止监听特定目标元素。</dd>
+ <dt>
+ <h2 id="示例">示例</h2>
+ </dt>
+</dl>
+
+<pre><code>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 &lt;= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// start observing
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</code></pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>{{domxref('MutationObserver')}}</li>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+</ul>
+
+<p> </p>
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
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary"><strong><code>IntersectionObserver()</code></strong>构造器创建并返回一个{{domxref("IntersectionObserver")}}对象。</span> 如果指定<code>rootMargin</code>则会检查其是否符合语法规定，检查阈值以确保全部在0.0到1.0之间，并且阈值列表会按升序排列。如果阈值列表为空，则默认为一个[0.0]的数组。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>observer</em> = new IntersectionObserver(<em>callback</em>[, <em>options</em>]);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数：
+ <dl>
+  <dt><code>entries</code></dt>
+  <dd>一个{{domxref("IntersectionObserverEntry")}}对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。</dd>
+  <dt><code>observer</code></dt>
+  <dd>被调用的{{domxref("IntersectionObserver")}}实例。</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>一个可以用来配置observer实例的对象。如果<code>options</code>未指定，observer实例默认使用文档视口作为root，并且没有margin，阈值为0%（意味着即使一像素的改变都会触发回调函数）。你可以指定以下配置：
+ <dl>
+  <dt><code>root</code></dt>
+  <dd>监听元素的祖先元素{{domxref("Element")}}对象，其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。</dd>
+  <dt><code>rootMargin</code></dt>
+  <dd>一个在计算交叉值时添加至根的边界盒({{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"。</dd>
+  <dt><code>threshold</code></dt>
+  <dd>规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数组。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都是可见的(此段英文原文直译，正确性有待验证) 。可以参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}} 来深入了解阈值是如何使用的。阈值的默认值为0.0。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个可以使用规定阈值监听目标元素可见部分与<code>root</code>交叉状况的新的{{domxref("IntersectionObserver")}} 实例。调用自身的{{domxref("IntersectionObserver.observe", "observe()")}} 方法开始使用规定的阈值监听指定目标。</p>
+
+<h3 id="异常">异常</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>指定的<code>rootMargin</code>不存在。</dd>
+ <dt>RangeError</dt>
+ <dd>一个或多个阈值超出了0.0到1.0的范围。</dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p>
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
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">{{domxref("IntersectionObserver")}} 对象的<code><strong>observe()</strong></code> 方法向IntersectionObserver对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根， 但是可以监视多个目标元素，以查看这些目标元素可见区域的变化。</span>调用{{domxref("IntersectionObserver.unobserve()")}}方法可以停止观察元素。</p>
+
+<p>当指定元素的可见区域超过监听者的可见区域阈值之一时（阈值列表{{domxref("IntersectionObserver.thresholds")}}），监听者的回调会被传入代表当前发生的交叉变化{{domxref("IntersectionObserverEntry")}}并执行。请注意，这种设计允许通过调用一次回调，给回调传入IntersectionObserverEntry对象数组，来实现同时处理多个被监听元素的交叉变化。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>targetElement</code></dt>
+ <dd>可见性区域被监控的元素{{domxref("element")}}。<br>
+ 此元素必须是根元素的后代 (如果根元素为视窗，则该元素必须被当前文档包含)。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>&lt;&lt;&lt;...&gt;&gt;&gt;</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.observe")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("IntersectionObserver.unobserve()")}}</li>
+</ul>
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
+---
+<p><code>root</code> 属性用来获取当前 <code>intersectionObserver</code> 实例的根元素。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>intersectionObserver</var>.root;
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  实现于 <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/intersectionobserver/">Windows Insider Preview Build 14986</a>。</p>
+
+<p>[2] 实现于 {{geckoRelease("53.0")}}，但默认处于关闭状态，需要打开<code>dom.IntersectionObserver.enabled。</code></p>
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
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("IntersectionObserver")}} 接口的只读属性<strong><code>rootMargin</code></strong>是与CSS属性{{cssxref("margin")}}语法相似的字符串(string)对象. 在交叉检测开始之前，由<code>rootMargin规定的矩形的每一边都会被添加至</code>{{domxref("IntersectionObserver.root", "root")}}元素的边框盒({{Glossary("bounding box")}})的相应边。例如，这可以让你向外调整边界，使得目标元素被认为是100%可见的，即使此元素得一部分长或宽被裁剪，或者在边缘过于靠近根边框盒边界的情况下，将目标视为部分隐藏。</p>
+
+<p>可参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解root margin的工作原理或如何使其与根的边框盒进行协同工作。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var><code>var <em>marginString</em> = </code>IntersectionObserver</var>.rootMargin;
+</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个字符串, 形式与CSS {{cssxref("margin")}}属性相似，包含了一条或一组根边框盒边的偏移量。这些偏移量会被添加至根边界盒与目标元素边界的交叉区域之前。</p>
+
+<p>这个属性返回的字符串也许会与{{domxref("IntersectionObserver")}}被配置时所指定的值有所差别。浏览器可以改变这些值。</p>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif">如果</font>rootMargin在对象初始化的时候未被指定，它将被设置成默认值</code><code>"0px 0px 0px 0px"，这将意味着在原根节点边界框与目标边界之间计算交叉值。</code>  {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}} 描述了rootMargin的更加深入的使用方法。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p>
+</div>
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
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary">{{domxref("IntersectionObserver")}} 的方法<code><strong>takeRecords()</strong></code> 返回一个 {{domxref("IntersectionObserverEntry")}} 对象数组, </span>每个对象的目标元素都包含每次相交的信息<span class="seoSummary">, 可以</span>显式通过调用此方法或隐式地通过观察者的回调自动调用<span class="seoSummary">. </span></p>
+
+<div class="note">
+<p><strong>Note:</strong> 如果使用回调来监视这些更改，则无需调用此方法。调用此方法会清除挂起的相交状态列表，因此不会运行回调。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>intersectionObserverEntries</em> = <em>intersectionObserver</em>.takeRecords();</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>None.</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p> {{domxref("IntersectionObserverEntry")}} 对象数组, 每个对象包含目标元素与根每次的相交信息。</p>
+
+<dl>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>&lt;&lt;&lt;...&gt;&gt;&gt;</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-takeRecords','IntersectionObserver.takeRecords()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.takeRecords")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a></li>
+</ul>
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
+---
+<div>{{APIRef("Intersection Observer API")}}{{draft}}{{SeeCompatTable}}</div>
+
+<p>The {{domxref("IntersectionObserver")}} interface's read-only <strong><code>thresholds</code></strong> 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.</p>
+
+<p>See {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}} to learn how thresholds work.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var><code>var <em>thresholds</em> = </code>IntersectionObserver</var>.thresholds;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>An array of intersection thresholds, originally specified using the <code>threshold</code> 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 <code>threshold</code> array was in, this one is always sorted in numerically increasing order.</p>
+
+<p>If no <code>threshold</code> option was included when <code>IntersectionObserver()</code> was used to instantiate the observer, the value of <code>thresholds</code> is simply <code>[0]</code>.</p>
+
+<div class="note">
+<p>Be careful! Although the <code>options</code> object you can specify when creating an {{domxref("IntersectionObserver")}} has a field named {{domxref("IntersectionObserver.threshold", "threshold")}}, this property is called <code>thresholds</code>. Confusing? Yes. If you accidentally use <code>thresholds</code> as the name of the field in your <code>options</code>, the <code>thresholds</code> array will wind up being simply <code>[0.0]</code>, which is likely not what you expect. Debugging chaos may ensue.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>&lt;&lt;&lt;...&gt;&gt;&gt;</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.thresholds")}}</p>
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
+---
+<div><code>unobserve()方法命令</code>IntersectionObserver停止对一个元素的观察。</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">IntersectionObserver.unobserve(<em>target</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>要取消观察的目标，如果没有提供，方法不做任何事情，也不会抛出异常。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>下面代码段展示了一个观察器被创建，一个元素被观察，以及取消观察的过程。</p>
+
+<pre class="brush: js">var observer = new IntersectionObserver(callback);
+observer.observe(document.getElementById("elementToObserve"));
+
+/* ... */
+
+observer.unobserve(document.getElementById("elementToObserve"));</pre>
+
+<h2 id="说明">说明</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.unobserve")}}</p>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver.observe()")}}</li>
+</ul>