无限滚动:在滚动过程中浏览器一次又一次冻结。

Question

对于我的项目，我编写了一个无限滚动(index.php)程序，当用户到达页面末尾时，它应该总是从另一个子页面(带有偏移量的load.php)加载内容。

我的问题是，当我在移动设备上使用浏览器滚动(在火狐和iOS上进行测试)时，浏览器会冻结一段短时间(1-2秒)，然后很快就可以再次滚动，这非常烦人。

到目前为止，在笔记本电脑/个人电脑上，一切都能正常工作(在Win10上用火狐和边缘进行测试)。然而，在笔记本电脑/个人电脑上，我发现当新内容被加载时，滚动条一直在快速上升和下降，而且从来不会停滞不前，这看起来也有点令人不安。

到目前为止，我还没有在互联网上找到解决问题的办法。我希望你们中的一个能帮我，并可能修改脚本。谢谢!下面我已经用摘录显示了我的代码(这个项目非常大，所以只有摘录)：

HTML (index.php):

<!-- Fallback -->
<div id="no" style="display:none">
   No Content found...
</div>

<!-- Infinity -->
<div id="inf-0"></div><div id="inf-3" style="display:none"></div><div id="inf-6" style="display:none"></div><div id="inf-9" style="display:none"></div><div id="inf-12" style="display:none"></div><div id="inf-15" style="display:none"></div><div id="inf-18" style="display:none"></div><div id="inf-21" style="display:none"></div><div id="inf-24" style="display:none"></div><div id="inf-27" style="display:none"></div><div id="inf-30" style="display:none"></div><div id="inf-33" style="display:none"></div><div id="inf-36" style="display:none"></div><div id="inf-39" style="display:none"></div><div id="inf-42" style="display:none"></div><div id="inf-45" style="display:none"></div> ...

<!-- Spinner --->
<center><i class="fas fa-spinner fa-pulse fa-2x" id="spinner"></i></center>

Javascript:

var end = 0;
var infinity = 0;

window.addEventListener('load', function () {
    feed(infinity);
    infinity = infinity+3;
});

$(window).scroll(function() { 
    if(end == 0) {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 75) {
            document.getElementById("inf-"+infinity).style.display = "block";
            feed(infinity);
            infinity = infinity+3;
        }
    }
});

function feed(infinity) {
    $("#inf-" + infinity).load("load.php?off="+infinity+"&url="+encodeURIComponent(window.location.href), function( response, status, xhr ) {
        if (response == "") {
            document.getElementById("spinner").style.display = "none";
            document.getElementById("inf-"+infinity).style.display = "none";
            end = 1;
        } else {
            if (response == "no") {
                document.getElementById("spinner").style.display = "none";
                document.getElementById("inf-"+infinity).style.display = "none";
                document.getElementById("no").style.display = "block";
                end = 1;
            } else {
                document.getElementById("spinner").style.display = "block";
            }
        }  
    });
}

Answer 1

<div style="height: 400px !important" id="heighthelper">&nbsp;</div>

解决了将这个div添加到身体区域的问题。添加到if响应==“或== no”区域的Javascript中：

document.getElementById("heighthelper").style.display = "none";