一、属性值

1、scrollTop

滚动条滚动的垂直距离

$(window).scrollTop()

image.png

2、clientHeight

可视区的内容+内边距(不包括x轴的滚动条高度、边框、外边距）的高度

document.documentElement.clientHeight

image.png

clientHeight 对应的jquery写法

image.png

3、scrollHeight

可所有内容 (包括肉眼看不见、溢出、被窗口遮挡的部分)的高度

document.documentElement.scrollHeight

scrollHeight对应的jquery写法

image.png image.png

二、代码实现

$('#wrap').scroll(function(){
  var viewH =$(this).height();//可见高度
  var contentH =$(this).get(0).scrollHeight;//内容高度
  var scrollTop =$(this).scrollTop();//滚动高度
  //console.log('viewH',viewH)
  //console.log('contentH',contentH)
  //console.log('scrollTop',scrollTop)
  if(scrollTop + viewH >= contentH) { 
        console.log('haha,bottom')
  }
})

image.png

demo 地址 http://js.jirengu.com/xerof

最后结论：判断滚动到底部的条件是

scrollTop + clientHeight >= scrollHeight

参考 https://javascript.info/size-and-scroll