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

.scroll( )スクロールした時の処理を設定

構文

スクロールした時の処理を設定返値：jQueryオブジェクト
jQo.scroll( function )ver1.0〜
jQo.scroll( )ver1.0〜
jQo.scroll( object, function )ver1.4.3〜

機能

スクロールした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたスクロール時の処理を実行します。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます（データはイベントオブジェクトのdataプロパティ経由で渡されます）。

解説

スクロールした時に実行する処理を設定

サンプル（scroll/01.html）を開いてbody内の構成を確認してください。まずスクロールができるように非常に大きなdiv要素（blockのclass属性）があり、スクロールしても表示されるようにcss設定で位置を固定したdiv要素（injのid属性）があります。

jQueryは以下の様に記述され、scrollメソッドの引数にfunctionの「scrollFunc」が設定されています。対象はページ全体なので、セレクタはwindowに設定しています（documentを設定するとIE7で機能しません）。 

$(function () {
	$(window).scroll(scrollFunc);
});

scrollメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数（イベントオブジェクト）を受け取ります。そしてスクロールした時に実行したい処理を｛｝の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

scrollに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
　スクロールした時に実行したい処理
}

サンプルscroll/01.htmlで利用したscrollFuncは以下の様になっています。まずscrollTopメソッドを利用してページ（window）の上からのスクロール位置を取得し、textメソッドによってinjのid属性を持つdiv要素に表示します。 

function scrollFunc(eo){
	var st = $(window).scrollTop();
	$("#inj").text("scrollTop: " + st);
}

結果として、ページをスクロールするたびに上からのスクロール位置が表示されます。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル（scroll/01b.html） 

$(window).scroll(function (eo){
	var st = $(window).scrollTop();
	$("#inj").text("scrollTop: " + st);
});

横スクロールにも対応しています

scrollメソッドは横スクロールにも対応しています。サンプル（scroll/02.html）を開いてbody内の要素を確認してください。blockのclass属性の設定が変更され、横に長いdiv要素となっています。

jQueryは以下の様に記述され、利用されているメソッドがscrollLeftメソッドに変更され、左からのスクロール位置を取得するようにしてあります。 

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

結果として、横スクロールするたびに左からのスクロール位置が表示されます。

他の要素に設定されたスクロール時の処理を実行する

scrollメソッドは引数を設定しないと、要素に設定されたスクロール時の処理を実行します。
サンプル（scroll/03.html）を開いてbody内にbutton要素が追加されたことを確認してください。スクロールしなくてもイベントを実行できることを確認するため、巨大なdiv要素（blockのclass属性）は削除してあります。

続いてjQueryを確認してください。scrollメソッドの処理はscroll/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbutton要素をクリックするとwindowに設定されたスクロール時の処理が実行されます。 

$("button").click(function(){
	$(window).scroll();
});

結果として、button要素を「クリック」するとスクロールしたのと同じように上からのスクロール位置が表示されます。巨大div要素が削除されてスクロールバーはでないため、スクロール位置は「0」が表示されます。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル（scroll/04.html）を開いてbody内の構成はresize/01b.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、scrollメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト（eo）を通してfunctionに渡され、dataプロパティの値として取得できます。この値をtextメソッドを利用してinjのid属性を持つdiv要素に表示します。 

$(window).scroll({test:10}, function (eo){
	var myVol = eo.data.test;
	$("#inj").text("myVol: " + myVol);
});

結果として、スクロールするとdiv要素に第1引数で渡されたtestプロパティの値「10」が表示されます。

メモ

ブラウザのスクロール以外にも使えます

scrollメソッドはページ全体（window）のスクロール以外にも利用できます。
サンプル（scroll/test01.html）を開いてbody内にdiv要素があるのを確認してください。このdiv要素にはcss設定で高さとoverflowの設定がしてあり、表示しきれない部分はスクロールで表示するようにしてあります。

jQueryは以下の様に記述され、div要素がスクロールされたらスクロール位置を表示するようにしています。 

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

結果として、div要素のスクロールバーを操作するとp要素にスクロール位置が表示され、div要素に対してもscrollメソッドが利用できることが確認できます。ついでにtextArea要素で試したサンプル（scroll/test01b.html）も作成したので合わせて確認してください。textArea要素でも問題なく利用できます。

scrollメソッドはhtmlやbody要素には利用できません

scrollメソッドはセレクタにbody要素を利用できるか確認したのですが、ダメでした...。
サンプル（scroll/test02.html）では以下の様にセレクタにbodyを利用していますが、ブラウザをスクロールさせてもスクロール位置が表示されません。 

$("body").scroll(function(){
	var st = $(window).scrollTop();
	$("#inj").text("scrollTop: " + st);
});

html要素も試してみましたが、やはりダメでした。→サンプル（scroll/test02b.html） 

$("html").scroll(function(){
	var st = $(window).scrollTop();
	$("#inj").text("scrollTop: " + st);
});

またdocumentの場合は一見機能するように見えますが、IE7では機能しません。サンプルを用意したのでIE7の確認環境がある方は確認してみてください。→サンプル（scroll/test02c.html） 

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