2

我有一个无限滚动的页面，当用户的浏览器缩放为 100% 时可以正常工作。如果用户放大或缩小页面（即不是 100%），滚动最终会中断，页面将停止检索记录，即使还有更多记录需要获取。

我该如何纠正？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="../../jquery/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(window).scroll(function(){
            if($(window).scrollTop() == $(document).height() - $(window).height()){
                $('div#loadmoreajaxloader').show();
                $.ajax({
                    url: "test2.php?lastid=" + $(".postitem:last").attr("id"),
                    success: function(html){
                        if(html){
                            $("#postswrapper").append(html);
                            $('div#loadmoreajaxloader').hide();
                        }else{
                            $('div#loadmoreajaxloader').html('<center>That\'s the Last One!</center>');
                        }
                    }
                });
            }
        });
    </script>

    <style>
      .postitem{
      font-size: 16px;
      padding: 5px 0 15px 0;
      }
    </style>
</head>
<body>
<div id="hycucdemosbody">
    <div id="wrapper">
        <div id="postswrapper">
            <?php
            for($counter=0; $counter <= 50; $counter += 1){
              echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>';           
            }
            ?>
        </div>
        <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif"/></center></div>

    </div>
</div>

</body>
</html>

这是test2.php：

<?php
if(isset($_GET['lastid'])){
$counter=addslashes($_GET['lastid']) + 1;
$total=$counter+25;
  for($counter; $counter <= $total; $counter += 1){
   echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>';          
  }
}
?>
4

1 回答 1

3

可能的解决方案

只是为了确保，
请查看此链接，看看该解决方案是否对您有更好的帮助。它会检查您何时到达滚动条的底部。真的很准！

<div id="box" style="height:300px; overflow:auto;">
  <div class="inner">
    <!-- Your content goes here -->
  </div>
</div>

var elem = $('#box');
var inner = $('#box > .inner');
if ( Math.abs(inner.offset().top) + elem.height() + elem.offset().top >= inner.outerHeight() ) {
  // We're at the bottom!
}

检查缩放比例

嗯，如果这不起作用，我建议你看看这个问题和答案。

他们讨论了如何检测不同浏览器中的缩放量。您可以从那里更正代码以在确定滚动结束时考虑缩放。

无限滚动插件

除此之外，我建议您查看一些管理无限滚动的替代插件

我可能会列出一些其他的，但只是做一个谷歌搜索更容易，它们太多了。

快乐的编码和好运！:)

于 2011-12-29T17:38:15.423 回答