滾動底部的 div 內容 html javascript

Question

我想問一下 div 內容滾動監聽器（不是頁面）。 所以我有一個 html 代碼，其中 web 設計的外觀類似於本機應用程序。 我想要做的是如何檢測用戶是否向下滾動了內容 div？ 不是頁面，因為我的 web 頁面對他來說只是無聲的，而是在 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>