ユーザーがページの下部に到達したかどうかを確認します

Question

ユーザーがスクロールしてページの下部に到達したときにイベントをトリガーしようとしています。

私はインターネットを検索し、stackoverflowでいくつかの投稿を見つけましたが、予期せず答えが私のために働いていませんでした。

例：ページの最上部ではなく下部に到達した時には、上記SOポストのために与えられた答えを使用してCheck if a user has scrolled to the bottom

、私はトリガーしようとしているイベントが実行されます。

私が間違っているつもりなら、私に知らせてください：

$(window).scroll(function() { 
if($(window).scrollTop() + $(window).height() == $(document).height()) { 
    loadmore(); 
} 
}); 

function loadmore(){ 

var lastProd = $('.product_div').last(); 
var lastProdID = $('.product_div').last().prop('id'); 
//console.info(lastProdID); return false; 
//var val = document.getElementById("row_no").value; 
$.ajax({ 
    type: 'post', 
    url: 'includes/load_products.php', 
    data: { getresult:lastProdID }, 
    success: function (response) { 
     console.log(response); 
     //var content = document.getElementById("all_rows"); 
     //content.innerHTML = content.innerHTML+response; 
     lastProd.after(response); 

     // We increase the value by 10 because we limit the results by 10 
     // document.getElementById("row_no").value = Number(val)+10; 
    } 
}); 
} 

Answer 1

使用window.innerHeight + window.scrollY下の位置を決定し、document.body.offsetHeightが低いかどうかをチェックする（等しい動作しません）。

クレジットはmVChr,see hereになります。

window.onscroll = function(ev) { 
 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
 
    alert("bottom of the page reached"); 
 
    } 
 
};

.jump { 
 
    height: 1000px; 
 
}

<div class="jump"></div>

Answer 2

高さを確認し、オフセット

window.onscroll = function() { 
    var d = document.documentElement; 
    var offset = d.scrollTop + window.innerHeight; 
    var height = d.offsetHeight; 

    console.log('offset = ' + offset); 
    console.log('height = ' + height); 

    if (offset === height) { 
    console.log('At the bottom'); 
    loadmore(); // call function here 
    } 
};