Javascript infinite scrollbar

Question

I am writing a book that dynamically loads content when a user scrolls to it. The first problem I came across is setting the scrollbar. Since we only store paragraphs in our database without size information, I can only guess how long the document is. Based on this hunch, I can create a scrollable window that appears 10,000 pixels long and loads paragraphs as needed.

The easiest way I can imagine is to create a DIV that is 10,000 pixels long, and completely position the inline div at the scroll position displaying my content.

Is there a way to fully control the scrollbar under Javascript (by setting its minimum, maximum, position, relative thumb size), or am I going through the simple way mentioned above, or is there another way to do this?

I use ExtJS infrastructure, but it does not seem to offer any direct help, although V4 includes an infinite grid.

Answer 1

Other answers to this question simply expanded the content when the user hit the bottom, this is not what I was after. I need to display a full-sized, but sparsely populated, scrollable region. The solution I came up with was pretty simple:

I created a scrollable DIV (invoking her book) with a set of internal DIVs for each paragraph in the book. I need to do this in a paragraph, as this is of particular importance in our application, otherwise you will probably do it on a page. The DIV parameter has a default size based on the assumption of how large they are.

When the DIV book scrolls, javascript calculates which paragraphs of the DIV are now visible. Those that are visible but not filled are combined together. The web service is then used to fill in the required paragraphs of the DIV and their exact size.

The algorithm I use links some surrounding (non-invisible) paragraphs to give some forward look and quantization efficiency. The tape loader reads additional paragraphs as soon as the screen has been refreshed to facilitate smooth scrolling.

It turned out to be too simple. The hard work is chunking algorithms and adding a lazy reader.

Answer 2

Here are some ways:

Freemasonry Endless Scroll http://desandro.com/demo/masonry/docs/infinite-scroll.html

Cpde Sample:

$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 (without plugins) http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery

code:

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

Infinite Scroll jQuery Plugin (Original WordPress Plugin) http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Code example:

 // 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 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 (eg #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 }); 

Loading content when scrolling with jQuery (another example without PLugin) http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

code:

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

Answer 3

Try this endless scroller that I found today on Smashing Magazine:

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