先日ふとしたところで、ブラウザのスクロール値によって表示の切り替えを行う必要があり、
jQueryでスクロール量を測るサンプルを作ったので紹介してみます。

jQueryでブラウザのスクロールされた際の値を取るには
『.scrollTop(縦スクロール)』もしくは『.scrollLeft(横スクロール)』などがありますが、
あまり横スクロールで何か制御をするってことは少なく、縦スクロール値を取得する『.scrollTop』を使用することがほとんど。

なので、今回はページTOPからスクロールされた値『.scrollTop』を取得する際のサンプル。

実際の取得する際の記述方法は

$(window).scrollTop();
$(document).scrollTop();

といった書き方でページのTOPからの距離を測れます。
『$(‘html’).scrollTop();』でもいけるっぽいですが、Safariの3以前ではきちんと動作してくれないようで。。。

スクロール値を取得する動作サンプルは以下。

iframe内をスクロールすると左上の『現在のスクロール位置』にスクロールされた値が表示されます。
※サンプルはiframeなのでページTOP位置はiframeスクロールエリアの一番上が基準になっています。

境界線を3つ用意してあり、ページTOPから「150px」「300px」「500px」を過ぎると
それぞれ右上に通過エリア(テキスト)が表示されます。

このサンプルの構成は以下のような感じに。

◆HTML
<div id="container">

<div id="interval">現在のスクロール位置:<input type="text" size="10" value="0" id="intervalValue" /></div>

<div id="section150">ページTOPから<strong>150px</strong>地点</div>
<div id="section300">ページTOPから<strong>300px</strong>地点</div>
<div id="section500">ページTOPから<strong>500px</strong>地点</div>

</div><!--/container-->
◆SCRIPT
$(function(){
	$(window).scroll(function () {
		var ScrTop = $(document).scrollTop();

		$('#intervalValue').val(ScrTop);

		if ($('#intervalValue').val() < 150) {
			$('#alert150').remove();
			$('#alert300').remove();
			$('#alert500').remove();
		}
		if ($('#intervalValue').val() > 150) {
			if(document.getElementById("alert150") === null){
				$('body').prepend('<div id="alert150">ページTOPから<span>150px</span>通過</div>');
				$('#alert300').remove();
				$('#alert500').remove();
			}
		}
		if ($('#intervalValue').val() > 300 ) {
			if(document.getElementById("alert300") === null){
				$('body').prepend('<div id="alert300">ページTOPから<span>300px</span>通過</div>');
				$('#alert150').remove();
				$('#alert500').remove();
			}
		}
		if ($('#intervalValue').val() > 500 ) {
			if(document.getElementById("alert500") === null){
				$('body').prepend('<div id="alert500">ページTOPから<span>500px</span>通過</div>');
				$('#alert150').remove();
				$('#alert300').remove();
			}
		}
	});
});

スクロール地点によって何か表示するものを変化させたい場合や、
最近たまに見かける、追尾型のメニューエリアなどでもこの『.scrollTop』を使えば簡単に作成可能になります。
その他はあまり使用する場面がないかもしれませんが…

そんなこんなですが、
スクロール制御したい際には是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでブラウザのスクロール値を取得してみる

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR