web中怎么让滚动条一直处于底部
2016-03-31
展开全部
首先,我们拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。
这个区间是: [0, (offsetHeight - clientHeight)]
即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。
1、判断滚动条滚动到最底端: scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内: (offsetHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内: scrollTop / (offsetHeight – clientHeight) >= 0.95
如上。
如果要实现拉到底部自动加载内容。只要注册个滚动条事件:
scrollBottomTest =function(){
$("#contain").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见高度
contentH =$(this).get(0).scrollHeight,//内容高度
scrollTop =$(this).scrollTop();//滚动高度
//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
// 这里加载数据..
}
});
}
这个区间是: [0, (offsetHeight - clientHeight)]
即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。
1、判断滚动条滚动到最底端: scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内: (offsetHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内: scrollTop / (offsetHeight – clientHeight) >= 0.95
如上。
如果要实现拉到底部自动加载内容。只要注册个滚动条事件:
scrollBottomTest =function(){
$("#contain").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见高度
contentH =$(this).get(0).scrollHeight,//内容高度
scrollTop =$(this).scrollTop();//滚动高度
//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
// 这里加载数据..
}
});
}
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询