2012-05-10 102 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(); 
      }); 
} 

在此先感謝。

- *編輯* ----------------------------------------- ------------------------------------------

我剛剛發現 - 出答案。那就是:

$(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); 
    }