如何判断浏览器滚动到最底部?

一、属性值

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写法
$('.content').prop('scrollHeight')

image.png

二、代码实现

  $('.content').scroll(function(){
    var viewH =$(this).height();//可见高度
    var contentH =$(this).prop('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

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

scrollTop + clientHeight >= scrollHeight

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