Question

我有一个无限滚动的页面，当用户的浏览器缩放率达到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>';          
  }
}
?>

Answer 1

可能的解决方案

只是为了确保，
查看this link，看看该解决方案是否可以做得更好。它会检查您何时触及滚动的底部。这真的很准确！

<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!
}

检查缩放比率

嗯，如果这不起作用，我建议你看一下this question & answer。

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

无限滚动插件

除此之外，我建议您研究一些管理无限滚动的替代插件喜欢

我可能会列出其他几个，但只是进行谷歌搜索更容易，其中有很多。

编码愉快，万事如意！：）

如果我缩放浏览器，则无限滚动停止

1 个答案:

可能的解决方案

检查缩放比率

无限滚动插件