The infinite scrolling feature encounters issues when scrolling downwards

My infinite scroll code is causing a problem - it only works when scrolling up, not down. Can someone help me fix this issue?

<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>

Check out the live demo at

javascriptinfinite-scroll

Answer №1

Give it another shot using this updated snippet

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

$(document).ready(function(){

    $(window).scroll(scrollEvent);

});

Answer №2

You have the ability to modify the origin.

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        var lastID = $('.show-more').attr('lastID');
//Make changes in this section
        if(((window.innerHeight + window.scrollY) >= document.body.offsetHeight) && (lastID != 0)){

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Symfony's DataTables is encountering an issue with the JSON response, showing

I have encountered an issue while trying to fetch data from a response within my template table (using DataTables). The error message I receive is as follows: DataTables warning: table id=example - Invalid JSON response. For more information about this ...

javascriptjqueryjsondatatables

What is the operational mechanism behind drag and drop page builders?

I am currently delving into my inaugural MERN project, where the functionality requires specific components (such as a checkbox to-do list, images, text, etc...) that empower users to construct various pages, larger multi-checkbox aggregation lists, and be ...

javascriptnode.jsreactjsmongodbexpress

Is there a way to link a particular model table with a designated user table?

Hey everyone, I'm new to stack overflow and this is my first question. I hope it's clear enough for you all to understand. I'm currently working on a budget API using Node.js, Sequelize, Express, and PostgreSQL. The API allows users to add/ ...

javascriptnode.jsdatabasepostgresqlexpress

Utilizing Javascript for altering HTML elements

It seems this issue is quite puzzling and I believe another perspective could be beneficial in identifying the problem. Despite my efforts, I am unable to understand why the "Energy Calculator" does not return a value when submitted, whereas the "Battery C ...

javascripthtmlinnerhtmlgetelementbyid

Adjust the form action and text input name according to the selected radio input

Seeking assistance with the following code, can someone help? $(document).ready(function() { $('#searchform').submit(function() { var action = ''; if($('.action_url').val() == 'l_catalog') { ...

phpjavascriptjquery

The Angular Sortable Containment feature ensures that items cannot be dropped outside of

I am experiencing an issue with a horizontal sortable Angular list where the containment option is not functioning properly, causing the dragged item to not be dropped. Take a look at the sortable list below without a containment option - you may notice t ...

javascriptjqueryangularjsjquery-uisorting

Show segments of video stream on page using node.js

I am currently exploring Node.js and trying to understand how streams work, so please bear with me if I seem a bit unclear. After reading some beginner notes on streams, I decided to test it out. In my project files, specifically in public/images/videos/S ...

javascriptnode.jsvideostream

The true essence of Angular values only comes to light once the view has been updated

Here is the HTML code I am working with : <div class="container-fluid"> <div class="jumbotron" id="welcomehead"> <br><br><br><br><br><br><br><br><br><br> ...

javascriptangularjsfirebaseweb-applicationsfirebase-realtime-database

How can I troubleshoot the 'mdDialog console error' that says 'cannot read property element of null'?

Two of my templates are named Left_template_view_html and center_template_view_html When I click on a md-button in the Left_template_view_html I am attempting to display an mdDialog on the document.body What should I pass into the parent parameter: angu ...

javascriptangularjs

Displaying 'Undefined' instead of 'Cleared messages count' in the Clear Command

My goal is to display the number of deleted messages on an embed, but when the embed is sent, it shows bot deleted undefined messages. Here's a screenshot: https://i.sstatic.net/2GYxX.png I want it to show bot deleted ex: 15 messages. It works fine ...

javascriptnode.jsdiscorddiscord.js

Display the element when it becomes visible in the user's viewport as they

I've been struggling to implement a feature where an element is shown on scroll when it's in the viewport and hidden when it's not. However, despite my efforts, I haven't been able to get it working properly. Here's what I have so ...

javascriptjqueryhtmlscrollviewport

JavaScript: Increasing the date by a certain number of days

I've been researching various topics and so far, I haven't come across one that addresses my specific issue. Here's the task at hand: 1) Extract a bill date in the mm/dd/yy format, which is often not today's date. 2) Add a dynamic ...

javascript

Redux is set to return a proxy object in place of the actual state

I'm encountering an issue where I am getting a proxy object when trying to access my initial state in redux. How can I properly access the contents of my state? When attempting to retrieve a large 2D array for a grid, it seems to work fine with small ...

javascriptreactjsreduxproxyreact-redux

What are some methods to secure my API keys within my React application?

What steps can I take to secure my api keys in my react application? Should I incorporate something with express? My goal is to avoid creating any server-side components to handle the API calls. Currently, my backend is managed by firebase but I also uti ...

javascriptnode.jsapireactjssecurity

The hyperlink activation event is malfunctioning

There seems to be an issue with the "Goods" link not working after clicking on "Shops." <div class="i_find"> <div class="replaced_link">Goods</div> <div class="link_container"><a href="#" class="a_shops">Shops</a&g ...

javascriptjquery

Issue with socket.io: Server unable to emit event to client upon connection

I'm struggling with my basic socket.io setup as I can't seem to get my server to send a message once the connection is established. Upon establishing a connection to my server, I want it to automatically send a message back to the client. Here&a ...

javascriptnode.jssocketssocket.io

Adjust parent div size based on image size increase

I am currently facing a situation where I have a page displaying an image, but sometimes it appears too small. In order to make the image larger, I have utilized CSS Transform and it is working well. However, the issue lies in the fact that the parent DIV ...

javascripthtmlcss

Error encountered while using Jquery's .each() method on a DOM element and attempting to

Trying to utilize the each() function on my DOM to dynamically retrieve a field, I encountered an issue with the following code: var new_entry = new Object(); $('div[name="declaration-line-entry"]').each(function () { new_entry.name = $(this ...

javascriptjquery

React in 2022 has encountered an unexpected expression when it was expecting either an assignment or function call

I am having difficulty updating a chart with values received from an API. I am unsure about how to adjust the useEffect hook in my code. Any advice would be greatly appreciated. Here is a snippet of my code: import React, { useEffect, useState } from &quo ...

javascriptreactjs

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

I've been searching for the answer to this problem without any luck. I have a page with jquery ajax calls to an API service. It works well in Chrome, Safari, Firefox, and IE 10, but fails in IE 9 and 8. Here is the code: $.ajax({ ...

javascriptjqueryhtmlajaxinternet-explorer