Update InterserctionObservable content, zh-CN (#2161)

* IntersectionObserver update

* Intersection_Observer_API

根据最新英文版对照编辑, 更新&新增了一些翻译, 添加了英文版最新内容(还没翻译完)...

* flaw fix except macros

4 files changed, 56 insertions, 77 deletions

diff --git a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html
index 0e4513516e..92a8b99ff1 100644
--- a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html
+++ b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html
@@ -4,6 +4,8 @@ slug: Web/API/IntersectionObserver/disconnect
 tags:
   - API
   - Disconnect
+  - Intersection Observer
+  - Intersection Observer API
   - IntersectionObserver
   - Method
 translation_of: Web/API/IntersectionObserver/disconnect
@@ -14,7 +16,8 @@ translation_of: Web/API/IntersectionObserver/disconnect
 
 <h2 id="语法">语法</h2>
 
-<pre class="syntaxbox"><em>IntersectionObserver</em>.disconnect();</pre>
+<pre
+  class="brush: js"><em>intersectionObserver</em>.disconnect();</pre>
 
 <h3 id="参数">参数</h3>
 
@@ -26,26 +29,13 @@ translation_of: Web/API/IntersectionObserver/disconnect
 
 <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>
+{{Specifications}}
 
 <h2 id="浏览器兼容性">浏览器兼容性 </h2>
 
-<p>{{Compat("api.IntersectionObserver.disconnect")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also">See also</h2>
+<h2 id="See_also">参考</h2>
 
 <ul>
  <li>{{domxref("IntersectionObserver.observe", "observe()")}}</li>
diff --git a/files/zh-cn/web/api/intersectionobserver/index.html b/files/zh-cn/web/api/intersectionobserver/index.html
index e3bcf96bd3..1aa608a771 100644
--- a/files/zh-cn/web/api/intersectionobserver/index.html
+++ b/files/zh-cn/web/api/intersectionobserver/index.html
@@ -47,11 +47,12 @@ translation_of: Web/API/IntersectionObserver
  <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) {
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">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;
@@ -60,28 +61,15 @@ translation_of: Web/API/IntersectionObserver
   console.log('Loaded new items');
 });
 // start observing
-intersectionObserver.observe(document.querySelector('.scrollerFooter'));</code></pre>
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</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>
+{{Specifications}}
 
 <h2 id="浏览器兼容">浏览器兼容</h2>
 
-<p>{{Compat("api.IntersectionObserver")}}</p>
+<p>{{Compat}}</p>
 
 <h2 id="参考">参考</h2>
 
diff --git a/files/zh-cn/web/api/intersectionobserver/observe/index.html b/files/zh-cn/web/api/intersectionobserver/observe/index.html
index c2758917f6..9e5a3a577a 100644
--- a/files/zh-cn/web/api/intersectionobserver/observe/index.html
+++ b/files/zh-cn/web/api/intersectionobserver/observe/index.html
@@ -11,7 +11,8 @@ translation_of: Web/API/IntersectionObserver/observe
 
 <h2 id="语法">语法</h2>
 
-<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre>
+<pre
+  class="brush: js"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre>
 
 <h3 id="参数">参数</h3>
 
@@ -25,37 +26,41 @@ translation_of: Web/API/IntersectionObserver/observe
 
 <p><code>undefined</code>.</p>
 
-<dl>
-</dl>
+<h2 id="Examples">示例</h2>
+
+<pre class="brush: js">
+// Register IntersectionObserver
+const io = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    // Add 'active' class if observation target is inside viewport
+    if (entry.intersectionRatio > 0) {
+      entry.target.classList.add('active');
+    }
+    // Remove 'active' class otherwise
+    else {
+      entry.target.classList.remove('active');
+    }
+  })
+})
+
+// Declares what to observe, and observes its properties.
+const boxElList = document.querySelectorAll('.box');
+boxElList.forEach((el) => {
+    io.observe(el);
+})
+</pre>
 
-<h2 id="Examples">Examples</h2>
+<h2 id="Specifications">规范</h2>
 
-<p>&lt;&lt;&lt;...&gt;&gt;&gt;</p>
+{{Specifications}}
 
-<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>
+<h2 id="Browser_compatibility">浏览器兼容性</h2>
 
-<div>
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{Compat}}</p>
 
-<p>{{Compat("api.IntersectionObserver.observe")}}</p>
-</div>
 
-<h2 id="See_also">See also</h2>
+<h2 id="See_also">参考</h2>
 
 <ul>
  <li>{{domxref("IntersectionObserver.unobserve()")}}</li>
diff --git a/files/zh-cn/web/api/intersectionobserver/unobserve/index.html b/files/zh-cn/web/api/intersectionobserver/unobserve/index.html
index c3099ca224..45f8e1f5b5 100644
--- a/files/zh-cn/web/api/intersectionobserver/unobserve/index.html
+++ b/files/zh-cn/web/api/intersectionobserver/unobserve/index.html
@@ -4,14 +4,23 @@ slug: Web/API/IntersectionObserver/unobserve
 tags:
   - API
   - Intersection
+  - Intersection Observer
+  - Intersection Observer API
+  - IntersectionObserver
   - unobserve
 translation_of: Web/API/IntersectionObserver/unobserve
+browser-compat: api.IntersectionObserver.unobserve
 ---
-<div><code>unobserve()方法命令</code>IntersectionObserver停止对一个元素的观察。</div>
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p>{{domxref("IntersectionObserver")}}的<code>unobserve()</code>
+  方法命令<code>IntersectionObserver</code>停止对一个元素的观察。
+</p>
 
 <h2 id="语法">语法</h2>
 
-<pre class="syntaxbox">IntersectionObserver.unobserve(<em>target</em>);</pre>
+<pre
+  class="brush: js"><em>IntersectionObserver</em>.unobserve(<em>target</em>);</pre>
 
 <h3 id="参数">参数</h3>
 
@@ -40,24 +49,11 @@ 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>
+{{Specifications}}
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{Compat("api.IntersectionObserver.unobserve")}}</p>
+<p>{{Compat}}</p>
 
 <h2 id="另请参阅">另请参阅</h2>