javascriptjqueryhtmlinfinite-loopendlessscroll

How to stop TOP Scroll Load in jQuery Endless Scroll plugin


I am trying to create infinite loop for my website. I am using jQuery Endless Scroll plugin for that.

<script type='text/javascript' src='/js/jquery.min.js'></script>
<script type='text/javascript' src='/js/jquery.endless-scroll.js'></script>

$(document).ready(function() {
    $(window).endlessScroll({
        inflowPixels: 300,
                ceaseFireOnEmpty :false,
        callback: function() {
            var $img = $('#clmn-a .box:nth-child(4)').clone();
            $('#clmn-a').append($img);
        }
    });
});

Everything is working fine, but this function is running on top scroll also. I want to load data only when user reach near the footer. So how to disable Top Scroll Load in jQuery Endless Scroll plugin

PluginLink: https://github.com/fredwu/jquery-endless-scroll


Solution

  • Try this:

    $(document).ready(function() {
    
        EndlessScroll.prototype.detectScrollDirection = function() {
            var currentScrollTop;
            this.didScroll = true;
            currentScrollTop = $(this.target).scrollTop();
            if (currentScrollTop > this.lastScrollTop) {
              this.scrollDirection = 'next';
            }
            else{
            }
            return this.lastScrollTop = currentScrollTop;
          };
    
    
        $(window).endlessScroll({
            inflowPixels: 300,
                    ceaseFireOnEmpty :false,
            callback: function() {
                var $img = $('#clmn-a .box:nth-child(4)').clone();
                $('#clmn-a').append($img);
            }
        });
    });