我想实现一种称为可滚动 div 的技术GWT。我正在尝试做的事情如下。 如果用户在我的页面上，他只能看到视口（图像中的绿色框）。该视口中的所有 DOM 元素在页面加载时对用户可见。在页面加载时加载页面后，所有不在视口上的 DOM 元素尚未加载（图像中的蓝色框）。
如果用户拖动并移动视口，所有进入视口的 dom 元素都会变得可见。如果它们位于视口上，它们将通过 ajax 加载。
用户可以放大和缩小视口以使其变大或变小。此外，如果对用户不可见且尚未加载的元素变得可见，则必须通过 ajax 加载它们并显示在视口上。
我该如何使用 GWT 来实现这一点？
如果用户加载页面，则如下图所示：
用户可以向 8 个方向拖动和移动视口。它们是顶部、右上、右侧、右下、底部、左下、左侧和左上。下图显示了向左移动。 当视口移动时，应使用 ajax 加载新内容。
视口也可以放大。在这种情况下，还应该加载新内容。
视口也可以缩小。请注意，视口必须具有固定尺寸。只有内容应该是可缩放的。
UPD: jsfiddle 示例：http://jsfiddle.net/hv57s/9/
UPD: jsfiddle 具有放大/缩小按钮的功能：http://jsfiddle.net/hv57s/11/
根据这个例子回答：Indira.js 无限滚动
<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_tbodyAJAX 响应，例如：
function load_more(page){
$.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,})
.done(function( html ) {
$('#scrollable_tbody').append(html);
});
}
UPD:我认为你应该设置大尺寸html,body like:
html, body{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
并将视口设置为您想要的大小。
但如果你设置一些包装也许会更容易div就在之后body标记为
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这将是可滚动的。
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);
}
我没有对此进行测试，无论如何你都必须尝试一下。希望我能为您指出正确的方向。