个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 13:28:44 27 4
gpt4 key购买 nike

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

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

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

我必须如何使用 GWT 实现它？

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

enter image description here

用户可以向 8 个方向拖动和移动视口(viewport)。这些是上，右上，右，右下，下，左下，左和左上。下图显示了向左移动。当视口(viewport)移动时，应使用 ajax 加载新内容。

enter image description here

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

enter image description here

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

enter image description here

最佳答案

更新:jsfiddle 示例:http://jsfiddle.net/hv57s/9/

更新:带有放大/缩小按钮的 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;
}

然后根据需要设置视口(viewport)大小。

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

我没有对此进行测试，无论如何您都必须尝试一下。希望我能为您指明正确的方向。

关于javascript - 带有 Ajax 加载内容的无限滚动 Div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19370850/

27 4 0
文章推荐： android - Phonegap/Cordova 文件传输 - 错误 3 - Android
文章推荐： git - 如何在 git 的历史记录中找到所有包含提交的引用
文章推荐： git 克隆问题 : repo too large? (50m)
文章推荐： android - Google Game Services sPeers Disconnected/on P2P Disconnected not being called
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com