如何在 div 滚动结束时触发功能

哈沙姆

我正在使用 jquery infinity 分页。我有一个 div，其中的产品是动态调用的，可以说

<div id="product_list">
<?php include ('products.php'); ?>
</div>

现在我如何loadMoreData()在用户到达最后一个产品时触发功能我尝试这个但在页面末尾工作。

$(window).scroll(function() {

if($(window).scrollTop() + $(window).height() >= $(document).height()) {
     var last_id = $(".post-id:last").attr("id");
        alert(last_id);
        loadMoreData(last_id);
      }
});
 function loadMoreData(last_id){
  $.ajax(
        {
            url: 'loadMoreData.php?last_id=' + last_id,
            type: "get",
            beforeSend: function()
            {
                $('.ajax-load').show();
            }
        })
        .done(function(data)
        {
            $('.ajax-load').hide();
            $("#post-data").html(data);
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('server not responding...');
        });
}

高瑟姆湿婆

使用此示例代码，然后根据您的需要修改滚动功能，

<!DOCTYPE html>
<div id="product_list">
	<div style="background-color: green; height: 400px;"></div>
	<div style="background-color: blue; height: 400px;"></div>
	<div style="background-color: green; height: 400px;"></div>
	<div style="background-color: blue; height: 400px;"></div>
</div>

<div style="background-color: green; height: 100px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $("#product_list").height()) {

        alert("hi");
}
});
</script>

此代码计算窗口高度并将其与div (product_list)高度进行比较。如果滚动到 div 的末尾，则会alert弹出一个。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。