jquery滚动条操作

版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）

在开发项目时，常常需要展示大量数据。如果全部显示出来，数据相对少时，看不出来什么不同，如果数据很多时，一次请求全部显示，这就相当可怕了。

面对这种问题，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%时
    // 这里加载数据..
    }
 });

}