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

【问题标题】：Infinite Scrollable Div with Ajax loaded Content?带有 Ajax 加载内容的无限可滚动 Div？
【发布时间】：2013-10-20 01:15:58
【问题描述】：

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

如果用户拖动并移动视口，所有出现在视口上的 dom 元素都会变得可见。如果它们在视口上，它们将通过 ajax 加载。

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

我必须如何使用 GWT 实现这一点？

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

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

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

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

【问题讨论】：

我的回答对你有用吗？
@dr.dimitru not 它错过了很多。
无论如何，在你完成之后 - 请在这里留下一个链接，我们想看看结果
@dr.dimitru 我没有任何结果。你能创建一个js小提琴吗？我在移动视口时遇到问题。
整页是否有固定大小（我知道视口没有）？或者当你接近边界时它会改变？

标签： javascript html css ajax gwt

【解决方案1】：

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

UPD：带有放大/缩小按钮的 jsfiddle 功能：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); 
       });
}

统一更新： 我认为您应该为html,body 设置大尺寸，例如：

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

并将视口设置为您想要的大小。

但是如果你在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;
}

在这个元素内部更大的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);
  }

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

【讨论】：

如何设置背景 div 尺寸以使其在各个方向上的大小都无限？
我认为你应该为 html,body 设置大尺寸：
你将如何处理放大和缩小？
@stephan1001 @confile 要处理缩放，我认为最好使用按钮（例如在谷歌地图上）并在 div.huge 元素上更改 "transform" : "translate3d(0px, 0px, -36px)" - 这取决于 div.huge 内部的内容
@dr.dimitru 你能创建一个 js fiddle 来展示你的想法吗？