2

ユーザーのブラウザのズームが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>';          
  }
}
?>
4

1 に答える 1

3

考えられる解決策

念のため、このリンク
を チェックして、その解決策がもっとうまくいくかどうかを確認してください。巻物の一番下に当たったときにチェックします。本当に正確です！

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

ズーム比の確認

うーん、それがうまくいかない場合は、この質問と回答をご覧になることをお勧めします。

彼らは、さまざまなブラウザでズームの量を検出する方法について説明しています。そこから、スクロールの終了を決定するときにズームを考慮してコードを修正できます。

無限スクロールプラグイン

それ以外に、無限スクロールを管理する代替プラグインのいくつかを調べることをお勧めします。

私はおそらく他のいくつかをリストすることができますが、グーグル検索を行うだけの方が簡単です、それらの多くがあります。

幸せなコーディングと幸運を！:)

于 2011-12-29T17:38:15.423 に答える