滚动以在div中加载更多内容无法正常工作

时间:2016-12-01 08:20:37

标签: javascript jquery html5 scroll

我见过许多与这些相关的答案,但不适合我的情况。我有以下脚本来自动加载滚动文件。

我的问题:

  • 文件的自动加载可在FF,Edge,Chrome(桌面)中使用,但不能在chrome(android)中使用。 版本的Android版 54.0.2840.85 版本的Android 6.0.1

  • 另一个问题是在EDGE移动设备上(在运行Windows 10的Lumia设备上)它可以正常工作,但如果我隐藏导航栏则无法正常工作。

JS

// Auto-loading of older files
    var track_page = 1;
    var isAllDone = false;
    $('#list-content').on('scroll', function () {
       if(isAllDone) return;

       if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
           track_page++;
           $.ajax({
               type: "POST",
               url: "./generate_list.php",
               data: 'page='+track_page,
               beforeSend: function() {
                   $('#loadMore').show();
               },
               success: function (response) {
                   var obj = JSON.parse(response);
                   var arr = obj.items;
                   if (arr.length == 0) {
                       $('#loadMore').html("That's all folks!").show();
                       isAllDone = true;
                   }
                   else {
                       $('#loadMore').hide();

                       $(arr).each(function (i, val) {
                          li = $(val);
                          filelist.append(li);
                          li.delay(400 * i).slideDown(400);
                       });
                   }
               }
           });
       }
    });

HTML

<div id="list-content">
    <ul id="file_list">
    </ul>
    <div id="loadMore"><img src="images/loader.gif"></div>
</div>

0 个答案:

没有答案