DOM

：

：

Element.scrollLeft プロパティ

　編集：2022.09.20 by T.A.

[Edge]。→

element の内容が左端からスクロールするピクセル数を数値で取得／設定します。

要素の direction が rtl（right-to-left、右書き）の場合、scrollLeft が 0 のときにスクロールバーが右端の位置（スクロールする内容の開始位置）にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。

画面拡大を使用するシステムでは、scrollLeft が小数になることがあります。

構文
element.scrollLeft
element Element。
値

整数値。element が左端からスクロールしたピクセル数を表現したものです。

値の設定

scrollLeft は任意の整数値で設定することができます。しかし、

例

HTML： 

<div id="container">
  <div id="content">ボタンをクリックすると右にスライドします。</div>
</div>
<button id="slide" type="button">右へスライド</button>

CSS： 

#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}

JavaScript： 

const button = document.getElementById('slide');

button.onclick = function () {
  document.getElementById('container').scrollLeft += 20;
};

HTML： 

<DIV id=IdTest style="
 width:100px; height:100px;
 overflow:scroll;
 border:1px solid red;
 font-size:20px;
">aaaaaaaaaaaaaaaaaaaaaああああああああああああ<BR>いいい<BR>ううう<BR>えええ<BR>おおお
</DIV>

JavaScript： 

D=IdTest.scrollLeft

IdTest.scrollLeft=30

HTML： 

<DIV id=IdTest2 style="
 width:100px; height:100px;
 overflow:scroll;
 border:1px solid red;
 font-size:20px;
 direction:rtl;
">aaaaaaaaaaaaaaaaaaaaaああああああああああああ<BR>いいい<BR>ううう<BR>えええ<BR>おおお
</DIV>

JavaScript： 

IdTest2.scrollLeft=-30
テスト