1

我正在尝试实现在http://demo.webdeveloperplus.com/dynamic-scrollbox/中找到的动态滚动框

但它有一个问题是一遍又一遍地获取相同的列表。所以我试图只查看我的 aa.html 文件中的项目。

我的 aa.html 文件具有以下内容：

<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
<p>Item4</p>
<p>Item5</p>
<p>Item6</p>
<p>Item7</p>
<p>Item8</p>

我的实现脚本是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scrolling Dynamic Content box</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript">
$('document').ready(function(){
    updatestatus();

});
function updatestatus(){
    //Show number of loaded items
    var totalItems=$('#content p').length;
    $('#status').text('Loaded '+totalItems+' Items');
    $.get('aa.html', function(data) {
        var dom = $('<div/>').append(data);
        var tnoi = dom.find('p').length;
        alert("Total number of items = " + tnoi + ", Items of Current file = " + totalItems);
            if(totalItems < tnoi)
                scrollalert();

});

}
function scrollalert(){
    var scrolltop=$('#scrollbox').attr('scrollTop');
    var scrollheight=$('#scrollbox').attr('scrollHeight');
    var windowheight=$('#scrollbox').attr('clientHeight');
    var scrolloffset=20;
    if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
    {
        //fetch new items
        $('#status').text('Loading more items...');
        $.get('aa.html', '', function(newitems){
            $('#content').append(newitems);
            updatestatus();
        });
    }
    setTimeout('scrollalert();', 1500);
}
</script>

<style type="text/css" >
    #container{ width:400px; margin:0px auto; padding:40px 0; }
    #scrollbox{ width:400px; height:300px;  overflow:auto; overflow-x:hidden; border:1px solid #f2f2f2; }
    #container > p{ background:#eee; color:#666; font-family:Arial, sans-serif; font-size:0.75em; padding:5px; margin:0; text-align:right;}
</style>
</head>
<body>
  <div id="container">
    <div id="scrollbox" >
        <div id="content" >

        </div>
    </div>
    <p><span id="status" ></span></p>
</div>

<hr />
<p>
Demo Provided By: <a href="http://webdeveloperplus.com" title="Web Developer Plus - Ultimate Web Development & Design Resource" >Web
Developer Plus</a></p>
</body>
</html>
4

1 回答 1

0

问题是您总是$.get()来自同一个静态 HTML URL。您需要执行以下操作之一：

  1. 使用指向某个动态 URL 的 URL，其中服务器在每个 GET 上返回连续批次的项目。（虽然这有点问题，因为它需要服务器跟踪客户端状态。）

  2. 在 JavaScript 端保留一个计数器，每次$.get()使用计数器构建不同的 URL 时都会递增。例如

    var batch=0;  //at outer scope, or the top of your namespace
...
    batch += 1
    $.get('aa'+batch+'.html', '', function(newitems){

然后你可以有一组静态文件：aa1.html, aa2.html, aa3.html, 包含连续的批次。或者你可以有一个带有批处理参数的动态脚本

        $.get('aa?batch='+batch, '', function(newitems){

根据评论更新：

听起来您只需将整个内容加载到滚动框中一次。

如果您将脚本简化为简单的东西，例如：

<script type="text/javascript">
    $('document').ready(function(){
        $.get('aa.html', function(data) {
            $('<div/>').append(data);
        });
    });
</script>
于 2012-11-28T07:57:20.280 回答