スクロールイベントの開始/終了、方向を判別できる jQuery プラグイン

Ex Scroll は、スクロールイベントの開始/終了のタイミング、スクロール方向を判別することのできる jQuery プラグインです。2009 年頃に書いたプログラムですが、ちょくちょく需要があるようなのでソースの見直しも兼ね GitHub で管理するようにしました。リポジトリは jquery.utility-kit とし軽量の utility 系のプラグインはこちらで管理し追加してく予定です。

変更履歴

  • v0.2.1
    • API を変更。

使い方

jQuery、Ex Scroll の JS ファイルを読み込みます。

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. <script src="jquery.ex-scroll.js"></script>

スクロールバーのある要素、あるいは window オブジェクトに対しコールバック関数を指定して exScroll() メソッドを実行すると、 スクロールイベントが発生する毎にコールバック関数が呼び出され、各種メソッドを持つ API オブジェクトが引き渡されます。

以下のように記述すると、垂直方向にスクロールを開始した時点のみ、任意の処理を実行させることができます。

  1. $('#scrollbox').exScroll(function(api){
  2. if(api.getTiming() == 'start' && api.isScrollY()){
  3. //処理
  4. }
  5. });

demo

API

API オブジェクトを使用し、下記メソッドを実行できます。

  1. // スクロール状況を "start", "now", "end" の何れかで返す。
  2. getTiming : function(){
  3.  
  4. // スクロール向きを "x", "y" の何れかで返す。
  5. getDirection : function(){
  6.  
  7. // スクロール位置をオブジェクト({top:integer, left:integer, x:integer, y:integer})で返す。
  8. getPosition : function(){
  9.  
  10. // 前回位置からのスクロール量をオブジェクト({top:integer, left:integer, x:integer, y:integer})で返す。
  11. getRange : function(){
  12.  
  13. // 水平方向のスクロールの有無を真偽値(true or false)で返す。
  14. isScrollX : function(){
  15.  
  16. // 垂直方向のスクロールの有無を真偽値(true or false)で返す。
  17. isScrollY : function(){

ダウンロード

こちらからどうぞ。