js滚动条滚动到底部触发事件
⼀、前⾔
  在开发项⽬时，常常需要展⽰⼤量数据。如果全部显⽰出来，数据相对少时，看不出来什么不同，如果数据很多时，⼀次请求全部显⽰，这就相当可怕了。  ⾯对这种问题，PC⾥使⽤了分页效果，将数据分成⼀页页，换页时请求当前页数据，
  ⽽屏幕较⼩的移动端，分页就不怎么好看了，常⽤的⽅法是滚动到底部时继续加载数据
  滚动加载其实也是⼀种分页，只是不使⽤页码⽽已。
⼆、正⽂
（⼀）、滚动事件的效果和原理
效果：滚动到当前页的底部时，会转圈圈缓冲加载下⼀页的数据，完成后滚动区域和内容增加，以此类推；
原理： 3个数据（滚动视窗⾼度，滚动内容总⾼度，当前已滚距离），
  　1个临界（滚动内容总⾼度 = 当前已滚距离 + 滚动视窗⾼度）
　1.获取滚动视窗⾼度：$(window).height()；（如果滚动区域不是整个页⾯，使⽤$('slector').height()）
2.获取滚动内容总⾼度：$(this).get(0).scrollHeight
3.当前已滚距离：$(this).scrollTop()
（⼆）、scroll滚动事件：$(selector).scroll(function() {})
function scrollFunc(){
$("#container").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见⾼度
contentH =$(this).get(0).scrollHeight,//内容⾼度
scrollTop =$(this).scrollTop();//滚动⾼度
if(contentH = viewH + scrollTop) { //当滚动到底部时，
}
if(contentH - viewH - scrollTop <= 100) { //当滚动到距离底部100px时,
}
if(scrollTop/(contentH -viewH) >= 0.95){ //当滚动到距离底部5%时
// 这⾥加载数据..
}
});
}
三、结语
。。。
>js控制滚动条

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。