js 判断滚动到底部

// 判断标准：窗口高度 + 滚动条位置 >= 页面高度

/* -------------------------------------------- */

// 原生JS 判断整个文档滚动至底部
window.onscroll = ()=>{

  // 窗口高度
  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

    // 页面高度
    var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    // 滚动条位置
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      
    if ((windowHeight + scrollTop + 2) >= documentHeight) {
        console.log('页面滚动到达底部');
    }
}

// 原生JS 判断元素内部滚动至底部
document.getElementsByClassName('rank_body')[0].getElementsByTagName('ul')[0].onscroll = (e)=>{
      
  if(e.target.clientHeight + e.target.scrollTop + 2 >= e.target.scrollHeight){
    console.log('元素内部页面滚动到达底部');
  }
}

// or
document.getElementsByClassName('rank_body')[0].getElementsByTagName('ul')[0].addEventListener("scroll", (e)=>{

  if(e.target.clientHeight + e.target.scrollTop + 2 >= e.target.scrollHeight){
    console.log('元素内部页面滚动到达底部');
  }
}, false);
      
/* -------------------------------------------- */
      
//JQ 判断整个文档滚动至底部
$(window).scroll(function() {

  // 窗口高度
  var w_h = parseFloat($(window).height());
      
    // 页面高度
    var doc_h = $(document).height();
      
    // 当前滚动条位置时，页面可见区域及以上区域高度
    totalheight = w_h + parseFloat($(window).scrollTop()) + 2;
      
    if (totalheight >= doc_h) {
        console.log('页面滚动到达底部');
    }
});

//JQ 判断元素内部滚动至底部
$('#showRankbox').scroll(function() {

  // 元素高度
  var box_h = $('#showRankbox').height();

    // 元素内部页面高度
    var box_doc_h = parseFloat($('#showRankbox').find(' > ul').height());
    var $this = $(this);
    totalheight = box_h + parseFloat($this.scrollTop());

    if (totalheight + 2 >= box_doc_h) {
        console.log('元素内部页面滚动到达底部');
    }
})