Infinite Scroll with JScrollPane in WordPress

I’ve done AJAX post loaders before but I’m having quite an hard time with jScrollPane.
Two things:

• where should I load the posts? the div i created (#reviewspostscont) or .jspPane that JScrollPane makes? what if i have multiple loops then?

  Read More

  • WooCommerce: get_current_screen not working with multi language
  • Can’t login on WordPress
  • WordPress: Ajax not working to insert, query and result data

• a more practical one now, this is the code i have so far, I can’t get the function that triggers the AJAX to get the isAtRight variable (undefined in console), any fix?

Thanks in advance, Matt

$(function() {
    $('#reviewspostscont').each(function() {
        $(this).bind(
            'jsp-scroll-x',
            function(event, scrollPositionX, isAtLeft, isAtRight) {
                console.log('Handle jsp-scroll-x', this,
                            'scrollPositionX=', scrollPositionX,
                            'isAtLeft=', isAtLeft,
                            'isAtRight=', isAtRight);
            }
        );


        $(this).jScrollPane({ horizontalDragMaxWidth: 100 });

        var api = $(this).data('jsp');
        var throttleTimeout;
        $(window).bind('resize', function() {
            if (!throttleTimeout) {
                throttleTimeout = setTimeout(function() {
                    api.reinitialise();
                    throttleTimeout = null;
                }, 50);
            }
        });
    }); 

    $('#reviewspostscont').scroll(function() {
        var $this = $(this);
        var scrollWidth = $this[0].scrollWidth - $this.width();
        var scrollPercentage = $this.scrollLeft() / scrollWidth * 100;
        if (isAtRight == true) {
            loadArticle(count);
            count++;
        }
    });

    function loadArticle(pageNumber) {    
        $.ajax({
            url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
            type:'POST',
            data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
            success: function(html) {
                $("#reviewspostscont").append(html);   // This will be the div where our content will be loaded
            }
        });
        return false;
    }
});