9

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

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

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

我如何使用 GWT 来实现它？

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

4

1 回答 1

7

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

UPD：带有放大/缩小按钮的jsfiddle功能：http: //jsfiddle.net/hv57s/11/

基于此示例的答案：Indira.js Infinite 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_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：

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

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

于 2013-10-15T01:08:02.523 回答