CODEWITHSUNDEEP
javascriptjqueryhtml
Saurabh
Saurabh

Reputation: 2775

Jscroll not working on android device

I am facing a weird problem with this infinite scroll plugin.

This is my code:

$(function() {
    $('ul.pagination').hide();
    $('.scroll').jscroll({
        loadingHtml: '<div class="loading-icon"><i class="fa fa-spinner fa-2x fa-spin text-muted"></i></div>',
        autoTrigger: true,
        nextSelector: '.pagination li.active + li a',
        contentSelector: 'div.scroll',
        callback: function() {
            $('ul.pagination').remove();

            //Some extra code for lazyload and emoji
            $("img.lazy").lazyload({
                effect: "fadeIn",
            });
            $(".emojizone").each(function() {
                var original = $(this).html();
                var converted = emojione.toImage(original);
                $(this).html(converted);
            });
        }
    });
});

The infinite works like a charm on laptop or desktop devices, but on mobile device it doesn't seems to work.

Full story: On the first load on mobile device, when I scroll to the end of the page, the next page has to be loaded. But it doesn't. But when I minimize my mobile browser and return back to it, the next page is loaded(Weird but works) Again when the end of the page is reached, I have to minimize the browser and maximize it again to get the next page loaded with infinite scroll.

I am using XAMPP for localhost development and using Chrome on Android for mobile testing.

Update: This is the html part which is dynamically changed into infinite scroll with the above jQuery

<ul class="pagination">
    <li class="disabled"><span>«</span></li>
    <li class="active"><span>1</span></li>
    <li><a href="http://127.0.0.1/awesome-images/public/home?page=2">2</a></li>
    <li><a href="http://127.0.0.1/awesome-images/public/home?page=3">3</a></li>
    <li><a href="http://127.0.0.1/awesome-images/public/home?page=4">4</a></li>
    <li><a href="http://127.0.0.1/awesome-images/public/home?page=2" rel="next">»</a></li>
</ul>

This code is present at the end of the page.

Upvotes: 0

Views: 658

Answers (2)

Philip
Philip

Reputation: 71

jScroll has a padding option that allows you to set the distance from the bottom of the page at which to start loading the next set of content. Initialize with this as something above the default value of 0 to trigger the auto-load sooner and it will fix your issue on mobile.

$('.jscroll').jscroll({
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
    padding: 20,
    nextSelector: 'a.jscroll-next:last',
    contentSelector: 'li'
});

Full options list here: https://github.com/pklauzinski/jscroll#options

Upvotes: 2

Dario Vranjković
Dario Vranjković

Reputation: 91

You need open jscroll.js and change this line

c = Math.ceil(r - i + f.height()+ o);

to

c = Math.ceil(r - i + f.height()+200 + o);

So it starts loading before end of page.

Upvotes: 0

Related Questions