Question

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

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

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

如何使用GWT实现此功能？

如果用户加载页面，它看起来如下图所示：

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

Answer 1

<强> 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,body设置大尺寸，如：

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

并且可以滚动这个元素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);
  }

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

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

1 个答案: