デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
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);
});