jquery scrollLeftメソッド

TOPページに戻る > jquery入門

scrollLeft()メソッド

scrollLeftメソッドは、左からスクロールした位置を取得するメソッドです
引数には何も指定しません

$("セレクタ").scrollLeft();

ブラウザのページの左からの位置を指定する場合

$(document).scrollLeft();

スクロールした場合に処理を実行する

指定した要素スクロールしたときに、左からのスクロール量をテキストで表示します

jquery

$(function() {
	$("#hoge").scroll(function(){
	$("#foo").text("scrollLeft" + $(this).scrollLeft());
	});
});

css

#hoge {
 border: solid 1px;
 width: 200px;
 overflow: scroll;
 white-space: pre;
}

html

<div id="foo">scrollLeft</div>
<div id="hoge">あああああああああああああああああああああああああああ</div>

サンプル

左からのスクロールの位置を指定

引数に数字を指定するとpxで左からのスクロールの位置を指定できます

$("セレクタ").scrollLeft(数字);

スクロールの左位置を指定

指定した要素のスクロールの左位置を指定します

jquery

$("#hoge2").scrollLeft(50);

css

#hoge2{
 border: solid 1px;
 width: 200px;
 overflow: scroll;
 white-space: pre;
}

html

<div id="hoge2">あああああああああああああああああああああああああああ</div>

サンプル
スクロールバーの開始位置に注目してください