infinite scrolling stops if I zoom my browser

Asked 29/12, 2011 at 16:48 Answered 14/10, 2022 at 5:26

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>';          
  }
}
?>

Eocene answered 29/12, 2011 at 16:48 Comment(0)

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

Tiloine answered 29/12, 2011 at 17:38 Comment(0)

when zoom in,

console.log('document height'+jQuery(document).height());  ---15138
console.log('window scrollTop'+jQuery(window).scrollTop());---13926.25
console.log('window height'+jQuery(window).height());      ---1211

and the sum of jQuery(window).scrollTop() and jQuery(window).height() is 0.75 lower than jQuery(document).height().

So I add 2

    if (jQuery(document).height() <= jQuery(window).scrollTop() + jQuery(window).height() + 2)

Hope it works for you

Diluvium answered 14/10, 2022 at 5:26 Comment(0)

Possible solution

Checking zoom ratio

Infinite scroll plugins

Recommended topics

Hot tags