我正在使用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
}
});
});
答案 0 :(得分:2)
只是为了给出推荐和时尚的结局,我用这个:
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); }