जावास्क्रिप्ट में अनंत स्क्रॉलबार

यहाँ कई तरीके हैं:

चिनाई अनंत स्क्रॉल http://desandro.com/demo /masonry/docs/infinite-scroll.html

सीपीडीई नमूना:

$wall.infinitescroll({
  navSelector  : '#page_nav',  // selector for the paged navigation 
  nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loadingImg : 'img/loader.gif',
  donetext  : 'No more pages to load.',
  debug: false,
  errorCallback: function() { 
    // fade out the error message after 2 seconds
    $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
  }
  },
  // call masonry as a callback
  function( newElements ) { 
    $(this).masonry({ appendedContent: $( newElements ) }); 
  }
);

AJAXian Way (कोई प्लगइन नहीं) http://ajaxian. com/archives/implementing-infinite-scrolling-with-jquery

कोड:

//Scroll Detection
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

//Loading More content
function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src="bigLoader.gif"/>’);
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),   

    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);           
        }
        $(’div#lastPostsLoader’).empty();
    });
};

अनंत स्क्रॉल jQuery प्लगइन (मूल रूप से वर्डप्रेस प्लगइन) http: //www.infinite-scroll.com/infinite-scroll-jquery-plugin/

नमूना कोड:

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
  $('#content').infinitescroll({

    navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
  });
All options


// usage:
// $(elem).infinitescroll(options,[callback]);

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
$('#content').infinitescroll({

  navSelector  : "div.navigation",            
                 // selector for the paged navigation (it will be hidden)

  nextSelector : "div.navigation a:first",    
                 // selector for the NEXT link (to page 2)

  itemSelector : "#content div.post",          
                 // selector for all items you'll retrieve

  debug        : true,                        
                 // enable debug messaging ( to console.log )

  loadingImg   : "/img/loading.gif",          
                 // loading image.
                 // default: "http://www.infinite-scroll.com/loading.gif"

  loadingText  : "Loading new posts...",      
                 // text accompanying loading image
                 // default: "<em>Loading the next set of posts...</em>"

  animate      : true,      
                 // boolean, if the page will do an animated scroll when new content loads
                 // default: false

  extraScrollPx: 50,      
                 // number of additonal pixels that the page will scroll 
                 // (in addition to the height of the loading div)
                 // animate must be true for this to matter
                 // default: 150

  donetext     : "I think we've hit the end, Jim" ,
                 // text displayed when all items have been retrieved
                 // default: "<em>Congratulations, you've reached the end of the internet.</em>"

  bufferPx     : 40,
                 // increase this number if you want infscroll to fire quicker
                 // (a high number means a user will not see the loading message)
                 // new in 1.2
                 // default: 40

  errorCallback: function(){},
                 // called when a requested page 404's or when there is no more content
                 // new in 1.2                   

  localMode    : true
                 // enable an overflow:auto box to have the same functionality
                 // demo: http://paulirish.com/demo/infscr
                 // instead of watching the entire window scrolling the element this plugin
                 //   was called on will be watched
                 // new in 1.2
                 // default: false


    },function(arrayOfNewElems){

     // optional callback when new content is successfully loaded in.

     // keyword `this` will refer to the new DOM content that was just added.
     // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
     //                   all the new elements that were found are passed in as an array

});

// load all post divs from page 2 into an off-DOM div
$('<div/>').load('/page/2/ #content div.post',function(){ 
    $(this).appendTo('#content');    // once they're loaded, append them to our content area
});

jQuery के साथ स्क्रॉल करते समय सामग्री लोड करें (एक और कोई प्लगइन नमूना नहीं) http://www.webresourcesdepot.com/load-content- while-scrolling-with-jquery/

कोड:

function lastPostFunc() 
{ 
    $('div#lastPostsLoader').html('<img src="bigLoader.gif">');
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),     

    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);            
        }
        $('div#lastPostsLoader').empty();
    });
}; 

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

आज सुबह स्मैशिंग मैगज़ीन पर मिले इस अनंत स्क्रोलर को आज़माएँ:

http://markholton.com/posts/17-infiniscroll-jquery-plugin-released