jQueryでスクロールの方向を判定するコードの書き方（スマホのタッチ方向も対応）

スクロール値を取得するのはよく見かけますが、あまり方向を判定するのを見かけなかったので自分用にメモしておきます。

通常のスクロールとタッチスクロール両方対応

スクロールの方向を取得したい要素をjQueryで取得して、その要素にマウスオンしてたりタッチした場合の方向を判定します。ページ全体にかけたい場合は全体を囲んでいるタグでも指定すれば良いです。

//スクロールを検知する領域の設定
var $container = $('#container');

// スクロールの方向判定
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(mousewheelevent,function(e){
  e.preventDefault();
  var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
  if (delta < 0){
    console.log('下向きにスクロールした場合');
  } else {
    console.log('上向きにスクロールした場合');
  }
});

//スマホのタッチスクロール方向の判定。
var isTouch = ('ontouchstart' in window);
$container.on({'touchstart': function(e){
    this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
    //スクロール方向を測る基準値
    this.topBegin = parseInt($(this).css('top')); 
    this.top = parseInt($(this).css('top'));
    this.touched = true;
  },'touchmove': function(e){
    if(!this.touched){return;}
    e.preventDefault();
    //動きを無効化したうえで、タッチ位置のの格納していく
    this.top = this.top - (this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY));
    this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
  },'touchend': function(e){
    if (!this.touched) {return;}
    // タッチ判定をfalseに
    this.touched = false;
    // 最初に取得したタッチ位置とmove後に入れたタッチ位置を比較してスクロール方向を判定。
    if((this.topBegin) > this.top){
      console.log('下向きにスクロールした場合');
    } else if((this.topBegin) < this.top){
      console.log('上向きにスクロールした場合');
    }
  }
});

ひとつ気をつけた方がいい部分がありました。
タッチスクロールの方で取得している$(this).css(‘top’)は、cssで値を指定しておかないと、0じゃなくundefindになりました。なぜか動かない場合は、指定した要素のtopをcssで指定してあげると問題なく動くようになります。

ちら、下記のページを参考にさせていただきました。
【参考サイト】
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
Amazonでみる