Question

我有一个页面，我显示10张图片。在DOM中有x个图像。在滚动时，我想在滚动到达底部时显示5个图像。我的问题是没有任何表现......

我的代码：

    $(window).scroll(function (event) {
        if ($(window).height() + $(window).scrollTop() >= $(document).height()) {
            $.pagen.helpers.loadData();
        }
    });

。

$ pagen.helpers.loadData（）;功能：

 $(".imageListContainer.hidden").slice(0, 5).removeClass("hidden");

我错过了什么？

编辑HTML：

<div class="imageListContainer hidden">
  <img data-theme="Energi" data-products="XXX" data-store="XXXXXX" data- date="2016-02-03" src="XXXX">
 </div>

Answer 1

您的代码可能无法正常工作的原因有几个：

隐藏图片的网页内容不高于视口，因此window.scroll永远不会触发
$.pagen.helpers.loadData()丢失，定义不正确或无法访问
显而易见的事情，例如忘记包含jQuery
这不是滚动的窗口，而是一些其他DOM元素（将其添加到列表中，因为事实证明这是真正的原因）

正如您在下面所看到的，如果您使用该函数的内容替换对loadData函数的调用，则您的代码可以正常工作（观察滚动条向上勾选到达到底部的eatch时间）：

$(window).scroll(function() {
  if (
    $(window).height() + $(window).scrollTop() >= $(document).height()) {
      $('.imageListContainer.hidden').slice(0, 5).removeClass('hidden');
  }
});

.hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>Extra text to force scroll<br>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>
<div class="imageListContainer hidden">New element</div>

（我还没有确认的一个异常值：你测试滚动位置是否大于或等于文档高度。你可能希望在一些圆角误差或子像素值的情况下允许一些额外的斜率浏览器？（检查滚动位置＆gt; =（文档高度减去10px），比如说，而不是确切的高度）如果上面的代码段在您的浏览器中不起作用，则确认此猜测是正确的）

Answer 2

soloution：

    $(document).scroll(function (event) {

        if ($("#Tags").data("datefilteractive") == true || $("#Tags").data("filteractivated") == true)
            return false;

        var position = $(document).scrollTop() + $(window).height();
        position = Math.round(position) + 1;

        if (position >= $(document).height()) {
            $.pagen.helpers.loadData();
            $(".imageListContainer.hidden").slice(0, 5).removeClass("hidden");
        }

        else {

         // something else
        }

    });

当滚动到达底部并使用jquery时，如何正确地从元素中删除隐藏的类？

2 个答案: