滚动底部 html javascript 上的 div 内容

Posted 2023-05-08

【中文标题】滚动底部 html javascript 上的 div 内容

【英文标题】：div content on scrolled bottom html javascript

【发布时间】：2022-01-07 17:56:10

【问题描述】：

我想问一下 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>

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

【参考方案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>

【讨论】：

你好，谢谢你的回答，我已经尝试过这段代码，滚动功能仍然不起作用：”我必须在 if 语句之外尝试调试警报，但是 code$(window).scroll code 不起作用@YESSINE

@AdityaRizqi 你能检查控制台是否有任何错误吗？ （在 chrome 中按 F12 然后转到控制台）仔细检查是否在您正在执行的文档中导入了 jQuery，因为如果没有它，这将无法工作，您应该在 html/php 文档的底部有类似的内容<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js""></script>

我明白了，我会试试的，谢谢：" @YESSINE