javascript - 加载在 div 的底部无法正常工作

Question

所以这个问题不一定是如何让它工作，因为它确实如此。但这是非常非常错误的。我遇到的问题是，当您向下滚动时，有时需要一段时间才能加载，以便功能重新激活或其他东西。无论哪种方式，变量都会被重置，并且它会连续加载 5 页。所以它是越野车。我这里有代码：

var ldid = 10;
jQuery(
    function ($) {
        $('#allpostcontainer').bind('scroll', function () {
            if ($(this).scrollTop() +
                $(this).innerHeight() >= $(this)[0].scrollHeight) {

                $("#allpostcontainer").append($("<div>").load("/streampage.php?id=" + ldid, function () {
                    ldid = ldid + 10;
                }));

            }
        })
    }
);

Answer 1

您可以使用标志。

如果它正在加载，您可以将其设置为 true。

如果加载完成，则将其设置回 false，并且仅在为 false 时才发出 ajax 请求。

var ldid = 10,
    isPageLoading = false;

jQuery(
    function ($) {
        $('#allpostcontainer').bind('scroll', function () {
            if ($(this).scrollTop() +
                $(this).innerHeight() >= $(this)[0].scrollHeight && !isPageLoading) {

                isPageLoading = true;

                $("#allpostcontainer").append($("<div>").load("/streampage.php?id=" + ldid, function () {
                ldid = ldid + 10;

                isPageLoading = false;

            }));

        }
    })
}
);

Answer 2

如果您想在“allpostcontainer” div 的末尾设置您的 Div 标签，然后将下面的脚本放入您的页面中。

（#bottom 是您需要在底部显示的 Div 标签 ID。#allpostcontainer 是 div 标签 ID，它是带有滚动的主 Div）

<script>
    $(document).ready(function () {
        $('#bottom').css('position', 'absolute');
        $('#bottom').css('top', $('#allpostcontainer').height() - $('#bottom').height());
    });
</script>

如果您有任何疑问，请告诉我。

谢谢...