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('元素内部页面滚动到达底部');
}
})