2022/02/12 時点の英語版に同期

1 files changed, 83 insertions, 89 deletions

diff --git a/files/ja/web/api/element/scrollheight/index.md b/files/ja/web/api/element/scrollheight/index.md
index a2146b9db5..cead8be682 100644
--- a/files/ja/web/api/element/scrollheight/index.md
+++ b/files/ja/web/api/element/scrollheight/index.md
@@ -5,68 +5,70 @@ tags:
   - API
   - CSSOM View
   - NeedsDHTMLRemovalInExample
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollHeight
 translation_of: Web/API/Element/scrollHeight
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.scrollHeight</code></strong> は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。</p>
+**`Element.scrollHeight`** は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。
 
-<p><code>scrollHeight</code> の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その <code>scrollHeight</code> は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。</p>
+![](scrollheight.png)
 
-<div class="note">
-<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
+`scrollHeight` の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その `scrollHeight` は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。
 
-<pre class="syntaxbox notranslate"><var>elemScrollHeight</var> = <var>element</var>.scrollHeight;</pre>
+## 構文
 
-<h3 id="Value" name="Value">値</h3>
+```js
+elemScrollHeight = element.scrollHeight;
+```
 
-<p>整数値で、要素の scrollHeight ピクセル値に対応します。</p>
+### 値
 
-<h2 id="Example" name="Example">例</h2>
+整数値で、要素の scrollHeight ピクセル値に対応します。
 
-<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+## 問題と解決方法
 
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+## 要素が完全にスクロールされたかどうかの判定
 
-<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+`scrollTop` は丸められない数値で、 `scrollHeight` と `clientHeight` は丸められます。したがって、スクロール領域が下までスクロールされているかどうかを判断する唯一の方法は、スクロール量が何らかの閾値 (この例では `1`) に十分に近いかどうかを確認することです。
 
-<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
-</div>
-<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 225px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+```js
+Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1
+```
 
-<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+次の例は動作しません。 `scrollTop` が小数を含む可能性があるからです。
 
-<h2 id="Problems_and_solutions" name="Problems_and_solutions">問題と解決方法</h2>
+```js
+element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight
+```
 
-<h3 id="要素が完全にスクロールされたかどうかを判定する">要素が完全にスクロールされたかどうかを判定する</h3>
+### 要素がスクロール可能かどうかを判定
 
-<p>次の等式は、要素がスクロールの終点にあると <code>true</code> になり、それ以外は <code>false</code> になります。</p>
+コンテナーは、スクロールしないがあふれる子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。
 
-<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight
-</pre>
+```js
+window.getComputedStyle(element).overflowY === 'visible'
+window.getComputedStyle(element).overflowY !== 'hidden'
+```
 
-<p>コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。</p>
+## 例
 
-<pre class="syntaxbox notranslate">window.getComputedStyle(element).overflowY === 'visible'
-window.getComputedStyle(element).overflowY !== 'hidden'
-</pre>
+### ユーザーがテキストを読んだかどうかをチェック
 
-<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight のデモ</h2>
+{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。
 
-<p>{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：</p>
+以下のデモにあるチェックボックスは無効になっており、テキストエリアの内容が最後までスクロールするまでチェックして同意を表すことができなくなっています。
 
-<h3 id="HTML">HTML</h3>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;form name="registration"&gt;
-  &lt;p&gt;
-    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+```html
+<form name="registration">
+  <p>
+    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
 Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
 neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
 velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
@@ -88,18 +90,20 @@ ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maec
 interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
 laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
 nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
-    &lt;/textarea&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;input type="checkbox" id="agree" name="accept" /&gt;
-    &lt;label for="agree"&gt;I agree&lt;/label&gt;
-    &lt;input type="submit" id="nextstep" value="Next" /&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">#notice {
+    </textarea>
+  </p>
+  <p>
+    <input type="checkbox" id="agree" name="accept" />
+    <label for="agree">I agree</label>
+    <input type="submit" id="nextstep" value="Next" />
+  </p>
+</form>
+```
+
+#### CSS
+
+```css
+#notice {
   display: inline-block;
   margin-bottom: 12px;
   border-radius: 5px;
@@ -114,17 +118,19 @@ nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci
   padding: 5px;
   border: #2A9F00 solid 2px;
   border-radius: 5px;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+#### JavaScript
 
-<pre class="brush: js notranslate">function checkReading () {
+```js
+function checkReading () {
   if (checkReading.read) {
     return;
   }
-  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight;
   document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
-  checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+  checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
 }
 
 onload = function () {
@@ -136,38 +142,26 @@ onload = function () {
   oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
   oToBeRead.onscroll = checkReading;
   checkReading.call(oToBeRead);
-}</pre>
-
-<p>{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollHeight")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
- <li>{{domxref("Element.clientHeight")}}</li>
- <li>{{domxref("HTMLElement.offsetHeight")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
+}
+```
+
+### 結果
+
+{{EmbedLiveSample('Checking_that_the_user_has_read_a_text', '640', '400')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN:
+  Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer
+  9](<https://docs.microsoft.com/previous-versions/hh781509(v=vs.85)>)
+- {{domxref("Element.clientHeight")}}
+- {{domxref("HTMLElement.offsetHeight")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)