Infinite Scrollable Div with Ajax loaded Content?

前端未结

关注

 1  740

I want to implement a technique called scrollable div in GWT. What I am trying to do is the following. If a user is on my page he can only see the viewport (green box in th

相关标签:

1条回答

时光取名叫无心

2021-01-12 03:16

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.

0 讨论(0)