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>

我已经实现了这一点，但我真正需要的是：

我在一个除法（）中有 100 个“p”标签，我想首先显示10 个 p，当我将滚动条向下移动到末尾时，我想显示下一个 10（共 20 个） ……依此类推。为此，我不知道该怎么做。

任何人都可以帮助我不要提及任何 scoll 插件

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循环来加载前 10p秒，因为如果只加载前 10 秒，则它们的长度可能不足以产生滚动条，因此可以触发滚动事件，这一切都会发生没用。但是，如果您只想要前 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 回答