pjaxで遷移後スクロール制御のスクリプトがおかしくなる

Question

通常の読み込みではスクロール制御のスクリプトが問題なく動くのですが、
pjaxで遷移した後だと動かなくなります。

エラーログ：無し
jQueryバージョン:1.7.2

scrollControl:function (){

  var keys = [32, 37, 38, 39, 40], wheelIter = 0;

  function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
    e.preventDefault();
    e.returnValue = false;  
  }

  function keydown(e) {
    for (var i = keys.length; i--;) {
      if (e.keyCode === keys[i]) {
        preventDefault(e);
        return;
      }
    }
  }

  function touchmove(e) {
    preventDefault(e);
  }

  function disable_scroll() {
    window.onmousewheel = document.onmousewheel;
    document.onkeydown = keydown;
    document.body.ontouchmove = touchmove;
  }

  function enable_scroll() {
    window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;  
  }

  var docElem = window.document.documentElement,
      scrollVal,
      isRevealed, 
      noscroll, 
      isAnimating,
      container = $( '#container' ),
      trigger = $( '.pagedown' );

  function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
  }
  
  function scrollPage() {
    scrollVal = scrollY();
    if( noscroll ) {
      if( scrollVal < 0 ) return false;
      window.scrollTo( 0, 0 );
    }

    if( container.hasClass('notrans') ) {
      container.removeClass( 'notrans' );
      return false;
    }

    if( isAnimating ) {
      return false;
    }
    
    if( scrollVal <= 0 && isRevealed ) {
      toggle(0);
    }
    else if( scrollVal > 0 && !isRevealed ){
      toggle(1);
    }
  }

  function toggle( reveal ) {
    isAnimating = true;
    if( reveal ) {
      container.addClass( 'is-move' );
    }
    else {
      noscroll = true;
      disable_scroll();
      container.removeClass( 'is-move' );
    }

    setTimeout( function() {
      isRevealed = !isRevealed;
      isAnimating = false;
      if( reveal ) {
        noscroll = false;
        enable_scroll();
      }
    }, 1200 );
  }

  function menuShow(){
    $('.menu_trigger').on('click',function(){
      if(!$(this).hasClass('is-act')){
        if(!$('#container').hasClass('is-move')){
          disable_scroll();
        }
      }else{
        enable_scroll();
      }
    });
  }

  menuShow();

  var pageScroll = scrollY();
  noscroll = pageScroll === 0;
  
  disable_scroll();
  
  if( pageScroll ) {
    isRevealed = true;
    container.addClass( 'notrans' );
    container.addClass( 'is-move' );
  }
  
  window.addEventListener( 'scroll', scrollPage );
  trigger.on('click',function(){
    toggle( 'reveal' ); 
  });
}

読み込みは
通常

$(function(){});

pjax遷移後

$(document).on('pjax:render', function() {});

で行っております。

console.logで確認するとpjax遷移後だとscrollY()の値が増えずに0に戻ってしまうので
そこが原因かと思ったのですが
なぜ戻ってしまうのかがわかりません。

ここの動きを参考にソースを改変したものになります。

http://tympanus.net/Development/ArticleIntroEffects/index.html

どなたか原因がわかる方がいればご教授お願いします。

Answer 1

開示されているコードがオブジェクトの一箇所だけなので断定はできませんが
scrollControlをpjax毎の呼び出すということですね？

scrollControlで登録した全イベントはpjaxで遷移した後も
明示的に削除しない限り残っているというということはお分かりでしょうか？

window.addEventListener( 'scroll', scrollPage );がpjaxの度に上書きされることを期待されているのでしょうが、重複して登録されています。（親にあたるメソッドを呼び出すと別のものとして判断される模様）
つまるところ、scroll時に呼び出されるイベントが重複しておかしなことになっている、ということです。（要するにメモリリークもしています）
scrollPage()関数の条件分岐のところが重複して呼び出されると妙な挙動を起こすはずです。

pjaxのareaがどの要素に指定されているかにもよりますが
trigger（と必要であればcontainer）の部分をscrollControlメソッド外部から変更できるようにして
pjax:renderの際に呼び出すのはtrigger（+container）を遷移後の要素に置き換える処理のみにしておくとよいのではないでしょうか。（本当はもっとメソッドを小分けにしたほうが良いと思います。）

#####ポイントとして
pjaxでコンテンツを切り替えていく作りにしたい際は、リロードが発生しない為、イベントの状態管理が必要になります。
これはpjax関連の記事を見ていて誰も触れてないので、すこぶる不可思議なのですが
言うなればSPAを作る時と同じになるので、通常のサイトやページの作り方そのままを流用しようとすると、メモリリークのオンパレードで、コンテンツを切り替える毎にどんどんページ動作が重くなる…なんてことも少なくありません。

また、pjaxを使用する際、下手にネイティブのコードとjQueryのコードを混ぜないほうがお勧めです。
ネイティブのJavaScriptで付与したイベントはjQueryで削除できません。
その逆も然りです。
その為、思わぬところでメモリリークを発生させることになるので、可能な限りどちらかに揃えるほうが無難でしょう。
pjaxそのものがjQueryに依存しているので、個人的には、イベント処理もjQueryで行っておいたほうが事故が少ないと思います。

Comments

[yamaotakuro]

遷移時にスクロールイベントを削除することで正しい挙動を実現できました。
恥ずかしながら今までメモリリークを意識してなかったので今後意識していこうと思います。
pjaxを使った遷移のアドバイスまでいただき本当にありがとうございました。

[manabufukai]

お返事が遅くなり申し訳ございませんでした。
今のコードをなるべく触らずに解消するにはその方法が妥当でしょう。
今やJavaScriptでメモリリークのことを考えなければならないケースというのはそこまで多くないので無理もないと思います。（普通ならページ遷移した時点でリフレッシュされる為）
また、jQueryとJavaScriptの併用によるメモリリークに関してはちょっとググってみていただくと結構いろいろ出てくると思いますので、そちらも合わせて是非。

慣れきたら是非、メソッドを小分けにした上で
updateメソッドのようなものを作成して、回答で挙げた対象要素の更新だけを行わせる、といったコードも考えてみてください。
pjax前後の処理が大幅に減らせるはずなので高速な動作感も高まると思います。