Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jScrollPane scrolling amount

I'm using jScrollPane and trying to find out how to get the scrolling amount. Basically I want to know when user reaches the bottom of the scroll so I can fire another function. This is my function:

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

Thanks in advance.

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

I just found-out the answer. Here it is:

$(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
        }
    });             
});
like image 880
Jay Avatar asked Aug 12 '26 08:08

Jay


1 Answers

Just for giving a recomendation and a stylish finish, I use this:

 JS

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

I've added a transition effect. The effect will be similar to 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);
    }

like image 127
xtyp Avatar answered Aug 15 '26 08:08

xtyp



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!