Infinite Scrollable Div with Ajax loaded Content?
UPD:jsfiddle EXAMPLE: http://jsfiddle.net/hv57s/9/
UPD:jsfiddle with zoom in/out buttons an functionality: http://jsfiddle.net/hv57s/11/
Answer based on this example: Indira.js Inifinite Scroll
<div id="scrollableDiv" data-scroll-callback="$('#load_button').trigger('click')"> <table> ... <tbody id="scrollable_tbody"> <tr> ... </tr> </tbody> <button id="load_button" onclick="load_more(page_number)">Show more</button></div><script>var scroll_el_id = 'scrollableDiv';var element = $('#scrollableDiv');$(window).unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function(event){ var scrollBottom = $(window).scrollTop() + $(window).height(); var elementBottom = element[0].scrollHeight + element.offset().top; if(scrollBottom >= elementBottom){ eval($(element).attr('data-scroll-callback')); $(window).unbind('scroll.' + scroll_el_id); }});</script>Next you just append to #scrollable_tbody AJAX-response, like:
function load_more(page){ $.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,}) .done(function( html ) { $('#scrollable_tbody').append(html); });}UPD:I think you should set big size for html,body like:
html, body{ min-width: 8192px; width: 8192px; min-height: 8192px; height: 8192px;}And set viewport in size you want.
But maybe it will more easier if you will set some wrap div right after body tag with
div.wrap{ overflow: scroll; -webkit-overflow-scrolling: touch; /*Do not forget to change your_viewport_* to actual size, also you can do this via jQuery on the fly*/ max-height: your_viewport_height; min-height:your_viewport_height; height:your_viewport_height; max-width: your_viewport_width; min-height:your_viewport_width; height:your_viewport_width;}and inside of this element Bigger div which will be scrollable.
div.huge{ min-width: 8192px; width: 8192px; min-height: 8192px; height: 8192px;}HTML:
<html><head>...</head><body> <div class="wrap"> <div class="huge"> ... </div> </div></body></html>Also do not forget to set scrolling control for all sides of elements, in example I have only Bottom line control, something like:
var scrollBottom = $(window).scrollTop() + $(window).height(); var elementBottom = element[0].scrollHeight + element.offset().top; var scrollTop = $(window).scrollTop(); var elementTop = element.offset().top; var scrollRight = $(window).scrollLeft() + $(window).width(); var elementRight = element[0].scrollWidth - element.offset().left; var scrollLeft = $(window).scrollLeft(); var elementLeft = element.offset().left; if(scrollBottom >= elementBottom && scrollTop <= elementTop && scrollRight >= elementRight && scrollLeft <= elementLeft){ eval($(element).attr('data-scroll-callback')); $(window).unbind('scroll.' + scroll_el_id); }I didn't test this, and anyways you will have to play around with this. Hope I'm point you into right direction.