最近写项目,要求实现滚动条滚动到底部的时候请求加载更多的数据。要实现此功能首先想到的就是scroll事件,通过查阅资料终于实现此功能,具体原理以下:ajax
首先须要给div加scroll事件,监听滚动条滚动动做。滚动加载的原理:当滚动条的高度加上 滚动条到div顶部的高度 等于div的可滚动高度时,说明滚动条到底部了,此时即可以触发向服务端请求数据的ajax请求了。服务器
判断滚动条是否滚动到底部:this
this.scrollHeight<=$(this).scrollTop()+$(this).height();
注:若是等滚动条滚动到底部时再加载,会影响用户的体验。由于通常动态加载的时候都须要向服务端请求资源,这时须要时间。一个更佳的方式是:当滚动条距离底部必定距离(C)时,就开始动态加载即向服务器请求资源。也就是预加载,预读取。代码即:spa
this.scrollHeight-C ==$(this).scrollTop()+$(this).height();
完整的滚动加载代码即:code
$("滚动区域ID").unbind("scroll").bind("scroll", function(e){ var sum = this.scrollHeight; if (sum <= $(this).scrollTop() + $(this).height()) { $.ajax({获取数据的逻辑代码}) } });
注:该方法在使用以前首先须要引入jQuery.js;blog
$(this).unbind('scroll').bind('scroll',function(){})这样写是为了不重复绑定。事件