如何使用 jquery 在滚动到底部时正确从元素中删除隐藏类

How to properly remove hidden class from element when scroll reaches bottom with jquery?

本文关键字：元素 删除 隐藏 jquery 何使用 滚动 底部      更新时间：2023-09-26

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

我的代码：

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

$.pagen.helpers.loadData((; function： 

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

我错过了什么？

编辑网页：

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

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

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

正如你在下面看到的，如果你用该函数的内容替换对 loadData 函数的调用，你的代码就会起作用(注意滚动条向上滴答作响，你点击底部的时间(：

$(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>

(我尚未确认的一种异常可能性：您测试滚动位置是否大于或等于文档高度。您可能希望在某些浏览器中出现舍入错误或子像素值时允许一点额外的倾斜？(检查滚动位置>=(文档高度减去 10px(，而不是确切的高度( 如果上面的代码片段在您的浏览器中不起作用，这将确认此猜测是正确的(

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
        }
    });
相关文章：