滚动底部 html javascript 上的 div 内容

Question

我想问一下 div 内容滚动监听器（不是页面）。 所以我有一个 html 代码，其中网页设计的外观类似于本机应用程序。我想要做的是如何检测用户是否向下滚动了内容 div？不是页面，因为我为他提供的网页只是无声的，而是在 div 中移动的页面。我的 div 代码是这样的

<div class="product-list-item">
   //product card
   //product card
</div>

当我像这样滚动时

我想在 ajax 到达 div 底部时查看其他产品，现在我 仍在使用手动按钮加载其他产品。

我用过这段代码，但它不起作用。

<script>
$(window).scroll(function() {
      if($(window).scrollTop() == $(document).height() - $(window).height()) {
            // ajax call get data from server and append to the div
      }
  });
</script>

有人对此有解决方案吗？提前谢谢你。

Answer 1

假设你有这个：

<div class="product-list-item" id="target">
   //product card
   //product card
</div>

您可以使用此脚本检查您是否到达了目标 div：

<script>
        $(window).scroll(function() {
            if ($(this).scrollTop()+$(this).height() >= $('#target').position().top) {
                console.log('Target Reached');
            }
        });
    </script>

你可以使用这种方法只执行一次代码，一旦它到达目标 div

<script>
        let isReached = false;
        $(window).scroll(function() {
            if ($(this).scrollTop()+$(this).height() >= $('#ftr').position().top && isReached == false) {
                isReached = true;
                //ajax call
            }
        });
    </script>