1

スクロール バーがタグの最後まで下がったときに、より多くの結果を表示するスクロール ダウン イベントを処理しています。追加できる部門（div）があります

スクロールバーが最後まで下がったときのタグ。そのために、次のコードを書きました。

スクリプト内:

<script>
 $(document).ready(function () {
  $(window).scroll(function () {        
    if ($(window).scrollTop() + $(window).height() > $('#main').height() - 200 ) {
        fun();
    }
  });
  var fun= function(){    
    $('p').appendTo("#main");
    setTimeout(fun2, 100);      
  }
  var fun2=function(){
   $("#main").append("<p>Hello Scroll me</p>");  
  }
 });

</script>

体内で：

<div id="main">
  <p  style='height:100px;'>Hello Scroll me</p><p  style='height:100px;'>Hello Scroll   me</p><p  style='height:100px;'>Hello Scroll me</p><p  style='height:100px;'>Hello Scroll me</p><p  style='height:100px;'>Hello Scroll me</p><p  style='height:100px;'>Hello Scroll me</p><p  style='height:100px;'>Hello Scroll me</p><p  style='height:100px;'>Hello Scroll me</p><p  style='height:100px;'>Hello Scroll me</p>

</div>

私はこれを達成しましたが、正確に必要なのは次のとおりです。

Division() に 100 個の 'p' タグがあります。最初に10 個の pを表示し、スクロール バーを最後まで移動すると、次の 10 個 (合計 20 個)を表示したいと考えています。そのために、私は何をすべきかわかりません。

スコールプラグインを参照せずに誰か助けてください

4

2 に答える 2

1

HTML

<div id="main">
  <!-- <p> tags here -->
</div>
<span id="indicator"></span>

CSS

.hidden {
  display: none;
}

jQuery

$(document).ready(function() {
  $("#main p").addClass("hidden");
  while ($("#main").outerHeight() < window.innerHeight) {
    showNextTen();
  }

  $(window).scroll(function(e) {
    if (($("span").offset().top - $(window).scrollTop()) <= window.innerHeight) {
      showNextTen();
    }
  });
});

function showNextTen() {
  $("#main p.hidden").slice(0, 10).removeClass("hidden");
}

divのspan外側は#main、スクロールバーがページの下部に到達したかどうかを確認するためのインジケーターとして使用されます。

ちなみに、while最初の 10 秒だけではなく、ループを使用してロードしました。最初の 10p秒だけがロードされると、スクロールバーを生成するのに十分な長さではない可能性があるため、スクロールイベントをトリガーでき、すべて役に立たない。ただし、最初の 10 個のみが必要な場合は、whileループを削除して、代わりにshowNextTen()すぐに呼び出すことができます。

于 2013-04-20T06:31:33.523 に答える
1

マークアップの方法によって異なりますが、クラスを使用している場合は、クラスの最初の 10 個のインスタンスからクラスを削除し、次の 10 個のインスタンスなどを削除できます。

$(window).scroll(function () {        
   if ($(window).scrollTop() + $(window).height() > $('#main').height() - 200 ) {
       $('.hidden:lt(9)').removeClass('hidden');
   }
});

ここにフィドルがあります

于 2013-04-20T06:33:32.003 に答える