javascript - 如何在加载新的 HTML 内容时防止自动滚动事件？

Question

我正在使用 window.scroll() 函数在滚动时将更多 html 内容附加到 DIV 持有者。我在每个滚动事件上分别加载 10..10。但是在加载前 10 个内容后，文档大小会增加，因此浏览器会自动滚动并调用 loadContent 函数并添加新内容，而无需手动滚动。我该如何防止这种机制。我只需要在用户加载更多内容时滚动按钮。

$(function(){
  var loading = true;
  $(window).scroll(function(){
  if ( loading && $(window).scrollTop() + $(window).height() > $(document).height() - 100 ){
        loading = false;
        loadContents();
        loading = true;
 }
 });
 )};

还有其他更好的方法来执行无限滚动功能吗？

Answer 1

通常使用像你这样的布尔标志是你将如何处理这个问题。通常，虽然数据是使用 ajax 填充的，但这loading就是要更改的地方。你的价值观loading似乎也是相反的。

$(function(){
    var loading = false;
    $(window).scroll(function(){
        if ( !loading && $(window).scrollTop() + $(window).height() > $(document).height() - 100 ){
            loading = true;
            loadContents();
        }
    });

    function loadContents() {
        $.ajax({
            ...,
            success: function () {
                // add new data
                loading = false;
            }
        });
    }
)};