Question

我遇到了this无限滚动插件的奇怪问题。

这是我的代码：

$(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进行localhost开发，并使用Chrome on Android进行移动测试。

更新这是html部分，它使用上面的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>

此代码显示在页面末尾。

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

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

Jscroll不在Android设备上工作

2 个答案: