бесконечная прокрутка останавливается, если я масштабирую свой браузер - PullRequest
Новая
       0

бесконечная прокрутка останавливается, если я масштабирую свой браузер

2 голосов
/ 29 декабря 2011

У меня есть страница с бесконечной прокруткой, которая прекрасно работает, когда масштаб браузера пользователя составляет 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 Ответ

3 голосов
/ 29 декабря 2011

Возможное решение

Просто чтобы убедиться,
Проверьте эту ссылку и посмотрите, может ли это решение помочь вам.Он проверяет, когда вы достигли нижней части свитка.Это действительно точно! 

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

Проверка коэффициента масштабирования

Хм, если это не сработает, я бы посоветовал вам взглянуть на этовопрос и ответ .

Они обсуждают, как определить степень увеличения в разных браузерах.Оттуда вы можете исправить свой код для учета увеличения при определении конца прокрутки.

Плагины бесконечной прокрутки

Кроме этого, я бы посоветовал вам посмотреть нанекоторые из альтернативных плагинов, которые управляют бесконечной прокруткой, например

Я мог бы перечислить несколько других, но проще просто выполнить поиск в Google, их так много.

Удачного кодирования и удачи!:)

...