jScroll doesn't add content if jscroll-inner is inserted into a bs "card-columns" class div in desktop size

[chriz74x]

I have responsive page where I have some bootstrap cards, I am using laravel and it's paginator, so I am adding the page links at the end of my foreach loop. What happens is that in the webpage when scrolling to bottom nothing happens, I have 3 cards per row and 3 rows in total, 9 items. If I switch to a different view through chrome dev tools like for example "Galaxy s5" then I get only one column, a card per row and 9 row in total, with this kind of view scrolling to the bottom triggers jScroll, same webpage. So some event is missing here. Any clue?

[chriz74x]

I got it. The script doesn't meet this condition:

if (!data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight())

Infact having logged those the iTtotalHeight + _options.padding is always less then $inner.outerHeight() (1850 and 5549.91) at the end of the page. I don't know why I got this 5549.91 as $inner.outerHeight() though.

Now if I understand this correctly the $inner.outerHeight() is the height of the jScroll div. However that number is bigger than iTotalHeight + etc. and sincerely I don't know why.

edit: checking my page it seems the entire page is 1543x2016 but then my jscroll-inner div inside the page is 356x5549. There are 9 bootstrap cards inside this box and everyone is 354x602 so I think the package is making the sum of those cards to calculate the total height. Hence this is why it's not working. I guess the jquery wrapAll() method is creating that 5549 height data. How can this be solved? The infinte-scroll' div height is only 1849, the jscroll-inner` height is 5549.

[chriz74x]

Here what I found, modyfing your code to:

// Wrap inner content, if it isn't already
            _wrapInnerContent = function() {
                if (!$e.find('.jscroll-inner').length) {
                    $e.contents().wrapAll('<div class="card-columns jscroll-inner" />');
                }
            },

and removing the class card-columns on my outer div the script works, because this way the card-columns jscroll-inner now has an height of 1849 pixels. However that's not a solution but I could try to add a script that finds the jscroll-inner" div and adds the card-columns` class. Maybe you should add an option that let the user add that class if needed.

[chriz74x]

I added this in my blade view in the script section to make it work:

@section('scripts')

    {!! Html::script('js/infScroll-cards.js') !!}

<script>

        $( document ).ready(function() {

                $('div.jscroll-inner').addClass('card-columns');

        });

    </script>
    
@endsection

[chriz74x]

I made a fork where I modified the script to add an optional class in user options. Please review it. https://github.com/chriz74x/jscroll