2012-05-10 21 views
3

jScrollPaneを使用して、スクロール量を取得する方法を調べています。基本的には、ユーザーがスクロールの下部に到達した時点を知りたいので、別の機能を起動できます。これは私の機能です:jScrollPaneスクロール量

in_page_scroll : function() { 
    "use strict"; 
    var inpage_container = $('.pal_inpage_wrapper'), 
     inpage_top_padd = $('.header_wrapper').height(), 
     win_main_height = $(window).height() - inpage_top_padd; 
     inpage_container.css({ 
      height: win_main_height, 
      marginTop: inpage_top_padd, 
      paddingTop: 0}).jScrollPane({ 
       autoReinitialise: true, 
       enableKeyboardNavigation : true 
      }).bind('mousewheel', function(e) { 
       e.preventDefault(); 
      }); 
} 

ありがとうございます。

- * EDIT * ----------------------------------------- ------------------------------------------

私が見つけたのは - 答えを出す。ここでは、次のとおりです。

$(function() { 
    var element = $('.scroll-pane').jScrollPane(), 
     api = element.data('jsp'); 

    $('.scroll-pane').bind('scroll', function() { 
     if($('.scroll-pane').outerHeight() + api.getContentPositionY() >= api.getContentHeight()) { 
      //Fire another function here 
     } 
    });    
}); 
+1

私はちょうど答えを見つけ、私の質問の編集セクションに含まれています。 – Jay

答えて

2

だけrecomendationとスタイリッシュな仕上げを与えるために、私はこれを使用します。

 JS 

    $('#jScrollPane').bind(
     'jsp-scroll-y', 
     function(event, scrollPositionY, isAtTop, isAtBottom) 
     { 
      if(scrollPositionY > 0) { 
       $(this).addClass('ShadowTOP') 
      } 
      if(isAtTop) { 
       $(this).removeClass('ShadowTOP') 
      } 
     } 
    ).jScrollPane() 

私はトランジションエフェクトを追加しました。その効果はGMailに似ています。

 
STYLE 

    .TransitionShadow{ 
     transition: all 0.35s ease-in-out; 
     -webkit-transition: all 0.35s ease-in-out; 
     -moz-transition: all 0.35s ease-in-out; 
    } 
    .ShadowTOP{ 
     -webkit-box-shadow: inset 0px 12px 16px -10px rgba(100, 100, 100, 0.3); 
     box-shadow: inset 0px 10px 16px -10px rgba(100, 100, 100, 0.3); 
    } 

関連する問題