在做手机网站,为了更好的用户使用,通常不会用到带页码块的分页去做列表页,以便在用户点击时不会去按特别小的页码去实现浏览每页,所以这里用到了ajax实现的下拉加载更多的做法,接下来,就是讲解如何去实现这个效果:
//在做之前建议先引入jquery框架库
$(window).scroll(function () {
//第一步,通过jquery获取windows对象,创建一个滚动事件
var scrollTop = $(this).scrollTop();
//第二步,$(this)指的就是当前window对象,
获取window对象滚动条在Y轴上的滚动距离
var scrollHeight = $(document).height();
//第三步,获取文档对象的高度
var windowHeight = $(this).height();
//第四步,获取window对象的高度
if (scrollTop + windowHeight == scrollHeight) {
从这个三个变量的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。
//此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作,下一篇将讲实例操作如何,请期待....
}
});上一篇: 织梦dedecms页面出现乱码的问题
下一篇: 网站列表页的下拉底部实现加载更多的实例
关键词:
