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

Posted 2023-03-04

技术标签:

【中文标题】如果我缩放浏览器，无限滚动会停止【英文标题】：infinite scrolling stops if I zoom my browser 【发布时间】：2012-01-30 00:54:46 【问题描述】：

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

?>

【问题讨论】：

【参考方案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!