一、属性值
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
效果预览
最后结论：判断滚动到底部的条件是
