jQuery を使うと、スクロールイベントを簡単に取得したり、スクロールイベントに対するハンドリング処理を実現できます:
ただ、少し取扱が難しい面もあります。上記の内容のままだとスクロールを感知する毎にイベントが発生し、その全てをハンドリングすることになります。要するに一回のスクロールの中で何度もこの処理を繰り返すことになります。
これを「スクロールが一段落したらハンドリング処理を行う」ように改良してみます。考え方として一定時間(以下の例では 200 ミリ秒)スクロールイベントが発生しなかったらハンドリングする、という考え方で擬似的に実装してみました:
↑青字が追加した部分です。考え方としてはスクロール発生時に 200 ミリ秒のタイマーを設定し、200 ミリ秒以内に同じイベントが発生したらタイマーを再度設定し直しています。そして200ミリ秒間同一のイベントが発生しなかった場合にハンドリング処理を行う、というアルゴリズムです。
これで擬似的にスクロールエンドのイベントに対するハンドリング処理を実現できました。
(参考)
http://www.web-labo.jp/archives/963
$(window).scroll( function(){ var scroll_top = $(this).scrollTop(); //. スクロール位置 : (スクロール時の処理) console.log( 'top = ' + top ); : });
ただ、少し取扱が難しい面もあります。上記の内容のままだとスクロールを感知する毎にイベントが発生し、その全てをハンドリングすることになります。要するに一回のスクロールの中で何度もこの処理を繰り返すことになります。
これを「スクロールが一段落したらハンドリング処理を行う」ように改良してみます。考え方として一定時間(以下の例では 200 ミリ秒)スクロールイベントが発生しなかったらハンドリングする、という考え方で擬似的に実装してみました:
var timer = false; $(window).scroll( function(){ if( timer !== false ){ clearTimeout( timer ); } timer = setTimeout( function(){ var scroll_top = $(this).scrollTop(); //. スクロール位置 : (スクロール時の処理) console.log( 'top = ' + top ); : }, 200 ); });
↑青字が追加した部分です。考え方としてはスクロール発生時に 200 ミリ秒のタイマーを設定し、200 ミリ秒以内に同じイベントが発生したらタイマーを再度設定し直しています。そして200ミリ秒間同一のイベントが発生しなかった場合にハンドリング処理を行う、というアルゴリズムです。
これで擬似的にスクロールエンドのイベントに対するハンドリング処理を実現できました。
(参考)
http://www.web-labo.jp/archives/963
コメント