CODEWITHSUNDEEP
javascriptjquery
Sreehari K M
Sreehari K M

Reputation: 575

How to prevent the auto Scroll Event while loading new HTML contents?

I am using window.scroll() function for appending more html contents to the DIV holder while scrolling . I am loading 10..10 each on each scroll event. But after loading the first 10 contents, the document size increasing and accordingly the browser automatically scrolls and calling the loadContent function and appending new contents without doing the scroll manually.how can i prevent this mechanism.I need to load further contents only when the user Scrolls the button.

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

Is there any other better way to perform the infinite scrolling functionality?

Upvotes: 0

Views: 1884

Answers (1)

Daniel Imms
Daniel Imms

Reputation: 50179

Usually with a boolean flag like you're doing is how you would handle this. Normally though the data is filled in using ajax and that's where loading would be changed. Your values for loading seems to be reverse also.

$(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;
            }
        });
    }
)};

Upvotes: 1

Related Questions