diff options
Diffstat (limited to 'files/ja/web/api/element/scrollleft')
| -rw-r--r-- | files/ja/web/api/element/scrollleft/index.html | 111 | ||||
| -rw-r--r-- | files/ja/web/api/element/scrollleft/index.md | 98 |
2 files changed, 98 insertions, 111 deletions
diff --git a/files/ja/web/api/element/scrollleft/index.html b/files/ja/web/api/element/scrollleft/index.html deleted file mode 100644 index 4a593af238..0000000000 --- a/files/ja/web/api/element/scrollleft/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Element.scrollLeft -slug: Web/API/Element/scrollLeft -tags: - - API - - CSSOM View - - Property - - Reference - - プロパティ -translation_of: Web/API/Element/scrollLeft ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Element.scrollLeft</code></strong> プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。</p> - -<p>要素の {{cssxref("direction")}} が <code>rtl</code> (right-to-left、右書き) の場合、 <code>scrollLeft</code> が <code>0</code> のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。</p> - -<div class="blockIndicator warning"> -<p>画面拡大を使用するシステムでは、 <code>scrollLeft</code> が小数になることがあります。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Getting_the_value" name="Getting_the_value">値の取得</h3> - -<pre class="syntaxbox">// スクロールしたピクセル数を取得 -var <em>sLeft</em> = <em>element</em>.scrollLeft; -</pre> - -<p><code>sLeft</code> は <code>element</code> が左端からスクロールしたピクセル数を整数で表現したものです。</p> - -<h3 id="Setting_the_value" name="Setting_the_value">値の設定</h3> - -<pre class="syntaxbox">// スクロールしたピクセル数を設定 -<em>element</em>.scrollLeft = 10; -</pre> - -<p><code>scrollLeft</code> は任意の整数値で設定することができます。しかし、</p> - -<ul> - <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li> - <li>指定された値が <code>0</code> より小さかったら (右書きの要素では <code>0</code> より大きかったら)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li> - <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollLeft</code> は最大値に設定されます。</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container"> - <div id="content">ボタンをクリックすると右にスライドします。</div> -</div> - -<button id="slide" type="button">右へスライド</button></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#container { - width: 100px; - height: 100px; - border: 1px solid #ccc; - overflow-x: scroll; -} - -#content { - width: 250px; - background-color: #ccc; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">const button = document.getElementById('slide'); - -button.onclick = function () { - document.getElementById('container').scrollLeft += 20; -};</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</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-scrollleft', 'scrollLeft')}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.scrollLeft")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> - <li>{{domxref("Element.scrollTop")}}</li> - <li>{{domxref("Element.scrollTo()")}}</li> -</ul> diff --git a/files/ja/web/api/element/scrollleft/index.md b/files/ja/web/api/element/scrollleft/index.md new file mode 100644 index 0000000000..0d7dc3bbb4 --- /dev/null +++ b/files/ja/web/api/element/scrollleft/index.md @@ -0,0 +1,98 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - CSSOM View + - プロパティ + - リファレンス +browser-compat: api.Element.scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +{{APIRef("DOM")}} + +**`Element.scrollLeft`** プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。 + +要素の {{cssxref("direction")}} が `rtl` (right-to-left、右書き) の場合、 `scrollLeft` が `0` のときにスクロールバーが右端の位置（スクロールする内容の開始位置）にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。 + +> **Warning:** 画面拡大を使用するシステムでは、 `scrollLeft` が小数になることがあります。 + +## 構文 + +### 値の取得 + +```js +// スクロールしたピクセル数を取得 +var sLeft = element.scrollLeft; +``` + +`sLeft` は `element` が左端からスクロールしたピクセル数を整数で表現したものです。 + +### 値の設定 + +```js +// スクロールしたピクセル数を設定 +element.scrollLeft = 10; +``` + +`scrollLeft` は任意の整数値で設定することができます。しかし、 + +- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 `scrollLeft` は `0` に設定されます。 +- 指定された値が `0` より小さかったら (右書きの要素では `0` より大きかったら)、 `scrollLeft` は `0` に設定されます。 +- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollLeft` は最大値に設定されます。 + +## 例 + +### HTML + +```html +<div id="container"> + <div id="content">ボタンをクリックすると右へスライドします。</div> +</div> + +<button id="slide" type="button">右へスライド</button> +``` + +### CSS + +```css +#container { + width: 100px; + height: 100px; + border: 1px solid #ccc; + overflow-x: scroll; +} + +#content { + width: 250px; + background-color: #ccc; +} +``` + +### JavaScript + +```js +const button = document.getElementById('slide'); + +button.onclick = function () { + document.getElementById('container').scrollLeft += 20; +}; +``` + +### 結果 + +{{EmbedLiveSample("Example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [MSDN's Measuring Element Dimension and Location](<https://msdn.microsoft.com/library/hh781509(v=vs.85).aspx> "MSDN Measuring Element Dimension and Location") +- {{domxref("Element.scrollTop")}} +- {{domxref("Element.scrollTo()")}} |