Twitter

jQueryでスクロール量を取得

2012/07/09 | jquery | コメント (0)

縦スクロールサイトを作る際には必ず必要になる、トップからの現在のスクロール量を取得します。
スクロールによるパララックス(視差)効果を実装する場合は、スクロール量と要素のオフセット値や条件分岐を利用して、背景をずらしたりオブジェクトを動かしたりします。

$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
	});
});

これだけ。値をとるだけならとっても簡単。
テスト用にブラウザ上で値を確認したい場合はhtmlに表示先を設定し、.textメソッドで値を出力しましょう。

<!-- html -->
<p id="scroll"></p>
$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
		$("#scroll").text("スクロール量:" + y); //追加
	});
});
CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top