Element.scrollLeft - 要素内の水平方向のスクロール量を取得、変更する

投稿日: / 更新日:

JavaScriptの、ElementオブジェクトのscrollLeftは、要素内の水平方向のスクロール量を取得、変更するプロパティです。

説明

scrollLeftプロパティは、要素内における水平方向のスクロール量を含みます。スクロールできない要素、またはiframeの場合、取得できる値は0です。iframe内のスクロール量を得るにはwindow.pageXを参照して下さい。

id="target"

内部コンテンツ

上記は、青い枠線の中に大きなコンテンツを内包している例です。画像が青枠内の左端部分にピッタリとくっつく位置までスクロールした時のスクロール量が、scrollLeftです。

// 要素を取得
var divElement = document.getElementById( "target" ) ;

// scrollLeftを変更
divElement.scrollLeft = 50 ;

scrollLeftプロパティの値は変更可能です。値を指定すると、その値の分だけ要素内でスクロールした状態になります。

サンプルコード

<div id="target">SYNCER</div>
// div要素を取得
var divElement = document.getElementById( "target" ) ;

// scrollLeftを取得
var scrollLeft = divElement.scrollLeft ;
// div要素を取得
var divElement = document.getElementById( "target" ) ;

// scrollLeftを取得
divElement.scrollLeft = 50 ;

デモ

Element.scrollLeftを取得して表示します。実行ボタンを押すと、scrollLeftプロパティに50をセットします。

構文

long scrollLeft = Element.scrollLeft
Element.scrollLeft = long newScrollLeft

返り値

項目説明
scrollLeft要素内の水平方向のスクロール量。スクロールバーがない場合、iframeの場合は0。

指定する値

項目説明
newScrollLeft新しく設定したい水平方向のスクロール量。この値の分だけスクロールした状態になる。

関連項目