javascript – 带有Ajax加载内容的无限可滚动Div？

我想在GWT中实现一种名为scrollable div的技术.我想要做的是以下内容.
如果用户在我的页面上,他只能看到视口(图像中的绿色框).此视口中的所有DOM元素在页面加载时对用户可见.在页面加载页面加载后(图像中的蓝色框),尚未加载不在视口上的Alle DOM元素.

如果用户拖动并移动视口,则所有dom元素都将变为可见,这些元素将进入视口.如果它们在视口上,则将通过ajax加载.

用户可以放大和缩小视口,使其变得越来越大.此外,如果用户不可见且因此未加载的元素变得可见,则必须通过ajax加载并显示在视口上.

我如何用GWT实现这个？

如果用户加载页面,它看起来像下图：

用户可以将视口拖动到8个方向.这些是顶部,右上,右下,右下,底部,左下,左和左上.下图显示了向左移动.
当视口移动时,新内容应该加载ajax.

视口也可以放大.在这种情况下,还应加载新内容.

视口也可以缩小.请注意,视口必须具有固定尺寸.只有内容应该是可缩放的.

解决方法:

UPD：
jsfiddle例子：http://jsfiddle.net/hv57s/9/

UPD：
jsfiddle with zoom in / out按钮功能：http://jsfiddle.net/hv57s/11/

基于此示例的答案：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>

接下来,您只需附加#scrollable_tbody AJAX响应,例如：

function load_more(page){

    $.ajax({type: "GET", url: 'some/url/load_more.PHP?page='+page,})
        .done(function( html ) { 

           $('#scrollable_tbody').append(html); 
       });
}

UPD：
我认为你应该为html设置大尺寸,如：

html, body{ 
    min-width: 8192px; 
    width: 8192px; 
    min-height: 8192px; 
    height: 8192px;
}

并设置您想要的视口大小.

但是如果你在身体标签之后设置一些包裹div可能会更容易

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

并且在这个元素里面可以滚动的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 && scrollLeft <= elementLeft){
    eval($(element).attr('data-scroll-callback'));
    $(window).unbind('scroll.' + scroll_el_id);
  }

我没有对此进行测试,无论如何你将不得不玩这个.希望我能指出你正确的方向.

javascript – 带有Ajax加载内容的无限可滚动Div？

相关推荐