初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

.scrollLeft( )スクロール位置（X座標）を取得/設定

構文

要素のスクロール位置（X座標）を取得返値：数値
jQo.scrollLeft( )ver1.2.6〜
要素のスクロール位置（X座標）を設定返値：jQueryオブジェクト
jQo.scrollLeft( 数値 )ver1.2.6〜

機能

引数を設定しない場合は、jQueryオブジェクトで指定した要素のスクロール位置（X座標）を取得します。スクロールができないケースでは0を返します。

引数を設定した場合はjQueryオブジェクトで指定した要素のスクロール位置（X座標）を設定します。ブラウザーのスクロール以外にも、cssのオーバーフロー設定によるスクロールも取得/設定できます。

解説

スクロール位置を取得します

サンプル（scrollLeft/01.html）を開いてbody内にdiv要素が1つあることを確認して下さい。このdiv要素にはcss設定でオーバーフローの設定がされ、スクロールバーが表示されます。

jQueryは以下の様に記述され、scrollイベントを利用して、div要素がスクロールされたらscrollLeftメソッドによってスクロール位置を取得しtextメソッドを利用してp要素に表示します。 

$("div").scroll(function(){
	var sl = $("div").scrollLeft();
	$("p").text("scrollLeft: " + sl);
});

結果として、div要素のスクロール量に応じて数値が表示されます。

ブラウザのスクロール位置を取得します

セレクタに「window」を利用することで、ブラウザのスクロール位置も取得できます。
サンプル（scrollLeft/02.html）を開いてbody内の構成を確認してください。ブラウザがスクロールできるように大きなdiv要素が10個あります。またスクロール位置を表示するために、位置を固定したdiv要素（injのid属性のdiv）を用意しました。

jQueryは以下の様に記述され、scrollイベントを利用して、ブラウザがスクロールされたらscrollLeftメソッドによってスクロール位置を取得しtextメソッドを利用して固定したdiv要素に表示します。 

$(document).scroll(function(){
	var sl = $(window).scrollLeft();
	$("#inj").text("scrollLeft: " + sl);
});

結果として、ブラウザのスクロールに応じてスクロール位置が表示されます。

スクロール位置を設定します

サンプル（scrollLeft/03.html）を開いてbody内の構成がscrollLeft/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、buttonをクリックするとdiv要素のスクロール位置が0（つまり左端）に移動するようにしました。 

$("button").click(function(){
	$("div").scrollLeft(0);
});

結果として、div要素を適当にスクロールした後でbuttonをクリックするとスクロールが左端に戻ります。

ブラウザのスクロール位置を設定します

サンプル（scrollLeft/04.html）を開いてbody内にdiv要素がたくさんあるのを確認してください。jQueryは以下の様に記述され、div要素をクリックするとoffsetメソッドによってクリックされたdiv要素（this）の位置を取得します。取得した位置をscrollLeftメソッドに利用することで、ブラウザのスクロール位置を移動します（セレクタにはwindowを利用します）。 

$("div.block").click(function(){
	var targetX = $(this).offset().left;
	$(window).scrollLeft(targetX);
});

結果として、クリックしたdiv要素がブラウザの左端に位置するような場所に移動します。

アニメでスクロール

scrollLeft/04.htmlでは、どのように移動したのか分かりにくいのでanimateメソッドを利用してアニメで移動するサンプルを作成しました。サンプル（scrollLeft/05.html）を開いてbody内の構成がscrollLeft/04.htmlと同じ事を確認してください。

jQueryは以下の様に変更され、アニメでscrollTopの位置をtargetXに移動させます。 

$("div.block").click(function(){
	var targetX = $(this).offset().left;
	$("html,body").animate({scrollLeft:targetX});
});

結果として、クリックしたdiv要素がブラウザの左端に位置するような場所にアニメで移動します。

関連項目

上からのスクロール位置を取得/設定したい場合はscrollTopメソッドを利用します。

メモ

bodyを利用するのか？htmlを利用するのか？（animeteメソッドの場合）

サンプルscrollLeft/05.htmlでanimateメソッドのセレクタにhtmlとbodyの2つを設定しています。以前はbodyだけでしたが、その場合IE7で機能しませんでした。以前、検証したことがあるのですが、そのときはIE8までしか検証していなかったため気が付きませんでした。
→参考：jQuery：スムースなスクロール（後編）

windowやdocumentは?（animeteメソッドの場合）

scrollLeftメソッドはページ全体のスクロール位置を取得する場合、セレクタにwindowを利用するのですが、animateメソッドでは機能しません。サンプル（scrollLeft/test01.html）やサンプル（scrollLeft/test01b.html）は、ほとんどscrollLeft/05.htmlと同じですが、セレクタをwindowやdocumentに変更しました。 

$("div").click(function(){
	var targetX = $(this).offset().left;
	$(window).animate({scrollLeft:targetX});
});
$("div").click(function(){
	var targetX = $(this).offset().left;
	$(document).animate({scrollLeft:targetX});
});

両方のサンプルともdiv要素をクリックしても機能しないことを確認してください。animateメソッドではセレクタにwindowやdocumentを利用できないようです。