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%时
        // 这里加载数据..
        }
     });
  }

 

 

三、结语

。。。