向下滚动时无限滚动不起作用答案

【问题标题】：Infinite scroll not work when scroll down向下滚动时无限滚动不起作用
【发布时间】：2020-03-09 23:16:57
【问题描述】：

我有一个代码无限滚动，但我有一个问题。为什么我的代码在向上滚动而不是向下滚动时工作？

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        var lastID = $('.load-more').attr('lastID');
        if(($(window).scrollTop() == $(document).height() - $(window).height()) && (lastID != 0)){
     //Why work when scroll up? i want this work when scroll down
            $.ajax({
                type:'POST',
                url:'<?php echo base_url('berita/load_more'); ?>',
                data:'id='+lastID,
                beforeSend:function(){
                    $('.load-more').show();
                },
                success:function(html){
                    $('.load-more').remove();
                    $('#postList').append(html);
                }
            });
        }
    });
});
</script>

在https://tabungamal.id/berita/infinite观看现场演示

【问题讨论】：

如果您在此处或代码窗格中发布您的代码会很棒
好的，代码已经更新了我的兄弟

标签： javascript infinite-scroll

【解决方案1】：

使用此代码重试

function scrollEvt(){
    var lastID = $('.load-more').attr('lastID');
    if(((window.innerHeight + window.scrollY) >= document.body.offsetHeight) && (lastID != 0)){
        $(window).off('scroll');
        $.ajax({
            type:'POST',
            url:'https://tabungamal.id/berita/load_more',
            data:'id='+lastID,
            beforeSend:function(){
                $('.load-more').show();
            },
            success:function(html){
                $('.load-more').remove();
                $('#postList').append(html);
                $(window).scroll(scrollEvt);
            }
        });
    }


}

$(document).ready(function(){

    $(window).scroll(scrollEvt);

});

【讨论】：

对不起，我想再问一次。在我的情况下，这次滚动没有到达底部，正好在页脚上方，必须加载数据_more
如果我想通过点击修改我的代码怎么办？不再使用滚动
只需 $ (window) .off ('scroll');我不需要源，所以我认为您可以将其删除。

【解决方案2】：

您可以更改来源。

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        var lastID = $('.load-more').attr('lastID');
//Try modifying here
        if(((window.innerHeight + window.scrollY) >= document.body.offsetHeight) && (lastID != 0)){

            $.ajax({
                type:'POST',
                url:'<?php echo base_url('berita/load_more'); ?>',
                data:'id='+lastID,
                beforeSend:function(){
                    $('.load-more').show();
                },
                success:function(html){
                    $('.load-more').remove();
                    $('#postList').append(html);
                }
            });
        }
    });
});
</script>

【讨论】：

向下滚动有效，但无限循环出错，内容重复
当我使用我的初始代码时，没有像这样的重复内容错误
滚动事件好像是重复的。