Jscroll 无法在 Android 设备上运行

Question

我在使用这个无限滚动插件时遇到了一个奇怪的问题。

这是我的代码：

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

无限在笔记本电脑或台式设备上就像一个魅力，但在移动设备上似乎不起作用。

全文：在移动设备上第一次加载时，当我滚动到页面末尾时，必须加载下一页。 但事实并非如此。 但是当我最小化我的移动浏览器并返回到它时，下一页被加载（奇怪但有效）再次到达页面末尾时，我必须最小化浏览器并再次最大化它以加载下一页无限滚动。

我正在使用XAMPP进行本地主机开发，并Chrome on Android进行移动测试。

更新：这是用上面的 jQuery 动态更改为无限滚动的 html 部分

<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>

此代码位于页面末尾。

Answer 1

jScroll 有一个padding选项，允许您设置从页面底部开始加载下一组内容的距离。 将其初始化为高于默认值0的值，以更快地触发自动加载，这将解决您在移动设备上的问题。

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

此处列出完整选项： https ://github.com/pklauzinski/jscroll#options

Answer 2

您需要打开 jscroll.js 并更改此行

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

到

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

所以它在页面结束之前开始加载。