Home/ Questions/Q 6987305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:55:11+00:00

I’ve got a page with infinite scrolling that works fine when the user’s browser’s

  • 0

I’ve got a page with infinite scrolling that works fine when the user’s browser’s zoom is at 100%. If the user zooms in on the page or zooms out (ie anything other than 100%) the scrolling eventually breaks and the page will stop retrieving records, even though there are many more to get.

How do I correct that?

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

here’s 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>';          
  }
}
?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Possible solution

    Just to make sure,
    Check out this link, and see if that solution might do you any better. It checks when you’ve hit the bottom of the scroll. It’s really accurate!

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

    Checking zoom ratio

    Hm, if that doesn’t work, I’d suggest you take a look at this question & answer.

    They discuss how to detect the amount of zoom in different browsers.
    You can, from there, correct your code to account for the zoom when determining the end of scroll.

    Infinite scroll plugins

    Other than that, I’d suggest you look into some of the alternative plugins that manage infinite scrolling
    Like

    I could probably list a few others, but it’s easier just to do a google search, there are so many of them.

    Happy coding and good luck! 🙂

    • 0