html+监听+页面滚动到底部,js 监听页面滚动到底部

直接上代码两种写法

1、jquery

Document

#contain{

border: 1px solid pink;

width: 100%;

height: 300px;

overflow: auto;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

。。。。。。。。。。。。。。。。

198199200

scrollBottomTest =function(){

$("#contain").scroll(function(){

var $this =$(this),

viewH =$this.height(),//可见高度 $("#contain")[0].clientHeight

contentH =$this.get(0).scrollHeight,//内容高度

scrollTop =$this.scrollTop();//滚动高度

//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容

if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容

console.log('现在百分比是： ', scrollTop/(contentH -viewH))

}

});

}

scrollBottomTest()

2、原生写法

Document

#contain{

border: 1px solid pink;

width: 100%;

height: 300px;

overflow: auto;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

。。。。。。。。。。。。。。。。

198199200

var _this = document.querySelector('#contain');

_this.addEventListener('scroll' , function(){

viewH = _this.clientHeight

contentH =_this.scrollHeight,//内容高度

scrollTop =_this.scrollTop;

//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容

if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容

console.log('现在百分比是： ', scrollTop/(contentH -viewH))

}

})