无限可滚动Div与Ajax加载内容？ [英] Infinite Scrollable Div with Ajax loaded Content?

问题描述

我想在

UPD ：
jsfiddle放大/缩小按钮功能： http：// jsfiddle .net / hv57s / 11 /

根据此示例回答： Indira.js Inifinite Scroll

 < div id =scrollableDivdata -scroll-callback =$（'＃load_button'）。trigger（'click'）> 
< table> 
 ... 
< tbody id =scrollable_tbody> 
< tr> 
 ... 
< / tr> 
< / tbody> 
< button id =load_buttononclick =load_more（page_number）>显示更多< / 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 = $窗口）.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> 
  

接下来，您只需附加到 #scrollable_tbody AJAX -response，如：

  function load_more（page）{
 
 $ .ajax GET，url：'some / url / load_more.php？page ='+ page，}）
 .done（function（html）{
 
 $（'＃scrollable_tbody' .append（html）; 
}）; 
} 
  

---

UPD：
我认为你应该为 html，body 设置大尺寸：

  html，body {
 min-width：8192px; 
 width：8192px; 
 min-height：8192px; 
 height：8192px; 
} 
  

并设置视口大小。

---

但也许这将更容易，如果你将设置一些换行 div 紧随正文标记

  div.wrap {
 overflow：scroll; 
 -webkit-overflow-scrolling：touch; 
 / *不要忘记将your_viewport_ *更改为实际大小，也可以通过jQuery快速执行此操作* / 
 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; 
} 
  

和此元素内部Bigger div

  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> 
  

也不要忘记为元素的所有边设置滚动控制，例如我只有底线控制，例如：

  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&&&&&&&&&&&&&&&&&& $（element）.attr（'data-scroll-callback'））; 
 $（window）.unbind（'scroll。'+ scroll_el_id）; 
} 
  

我没有测试这个，玩这个。希望我指出你走向正确的方向。

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 the image). All DOM elements that are in this viewport are visible to the user on page load. Alle DOM elements that are not on the viewport have not been loaded after a page has been loaded on page load (blue boxes in the image).

If the user drag and move the viewport, all dom elements become visible which come onto the viewport. If they are on the viewport they will be loaded via ajax.

The user can zoom in and out the viewport to make it bigger and smaller. Also, if elements that are invisible to the user and thus not loaded yet become visible, than they have to be loaded via ajax and displayed on the viewport.

How do I have to implement this with GWT?

If the user loads the page it looks like the following image:

The user can drag and move the viewport to 8 directions. These are top, top right, right, right bottom, bottom, bottom left, left and top left. The following image shows a movement to the left. When the viewport moves new content should be loaded with ajax.

The viewport can also be zoomed in. In this case also new content should be loaded.

The viewport can also be zoomed out. Note that the viewport must be of fixed dimensions. Only the content should be zoomable.

解决方案

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.

这篇关于无限可滚动Div与Ajax加载内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！