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

Question

I want to implement a technique called scrollable div in GWT . 我想在GWT中实现一种名为scrollable div的技术。 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. 此视口中的所有DOM元素在页面加载时对用户可见。 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). 在页面加载页面加载后（图像中的蓝色框），尚未加载不在视口上的Alle DOM元素。

If the user drag and move the viewport, all dom elements become visible which come onto the viewport. 如果用户拖动并移动视口，则所有dom元素都将变为可见，这些元素将进入视口。 If they are on the viewport they will be loaded via ajax. 如果它们在视口上，则将通过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. 此外，如果用户不可见且因此未加载的元素变得可见，则必须通过ajax加载并显示在视口上。

How do I have to implement this with GWT? 我如何用GWT实现这个？

If the user loads the page it looks like the following image: 如果用户加载页面，它看起来像下图：

在此输入图像描述

The user can drag and move the viewport to 8 directions. 用户可以将视口拖动到8个方向。 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. 当视口移动时，新内容应该加载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. 只有内容应该是可缩放的。

在此输入图像描述

Answer 1

UPD : jsfiddle EXAMPLE: http://jsfiddle.net/hv57s/9/ UPD ：jsfiddle示例： http ： //jsfiddle.net/hv57s/9/

UPD : jsfiddle with zoom in/out buttons an functionality: http://jsfiddle.net/hv57s/11/ UPD ：jsfiddle与放大/缩小按钮功能： http ： //jsfiddle.net/hv57s/11/

Answer based on this example: Indira.js Inifinite Scroll 基于此示例的答案： 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: 接下来，您只需附加#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: I think you should set big size for html,body like: UPD：我认为你应该为html,body设置大尺寸html,body如：

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 但是如果你在body标签之后设置一些包裹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;
}

and inside of this element Bigger div which will be scrollable. 并且在这个元素里面可以滚动的Bigger div 。

div.huge{ 
    min-width: 8192px; 
    width: 8192px; 
    min-height: 8192px; 
    height: 8192px;
}

HTML: 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. 希望我能指出你正确的方向。

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

问题描述

1 个解决方案

解决方案1
7 已采纳 2013-10-15 01:08:02

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

问题描述

1 个解决方案

解决方案1 7 已采纳 2013-10-15 01:08:02

解决方案1
7 已采纳 2013-10-15 01:08:02