首页 技术设计 前端 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('元素内部页面滚动到达底部');
	}
})