无限滚动的股利与阿贾克斯加载的内容？股利、加载、内容、阿贾克斯
我想实现一个叫做滚动的div GWT 技术。我所要做的是以下几点。 如果用户是在我的网页，他只能看到视（绿框的图像）。所有的DOM元素在这个视口中都可以看到在页面加载的用户。全部的DOM元素不在视口尚未装入后一页面已被装在页面加载（图像中蓝色框）。
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).
如果用户拖拽和移动视，所有的DOM元素可见哪来到视口。如果他们对视，他们将通过AJAX加载。
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.
用户可以放大和缩小的视口，使之更大，更小。此外，如果是对用户不可见，因此尚未加载元件变得可见，比他们通过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.
我如何与GWT来实现这一点？
How do I have to implement this with GWT?
如果用户加载它看起来像下图的页面：
If the user loads the page it looks like the following image:
，用户可以将移动视向8个方向。这些都是顶部，右上，右，右下，下，左下，左，左上角。下图显示了一个移动到左侧。 当视移动新的内容应装入阿贾克斯。
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例： http://jsfiddle.net/hv57s/9/
UPD: jsfiddle EXAMPLE: http://jsfiddle.net/hv57s/9/
UPD ： 的jsfiddle与放大/缩小按钮的功能： http://jsfiddle.net/hv57s/11/
UPD: jsfiddle with zoom in/out buttons an functionality: http://jsfiddle.net/hv57s/11/
根据这个例子答： Indira.js Inifinite滚动
<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的反应，如：
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：
我想你应该设置大尺寸 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.
但是，也许它会更容易，如果你会设置一些总结 DIV 之后体与标签
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;
}
和这个元素中更大的 DIV 这将是滚动的。
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:
<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);
}
我没有测试这一点，反正你将不得不玩的这一点。希望我点你到正确的方向。
