Rumah > Artikel > hujung hadapan web > js如何实现页面的滚动条下拉时加载更多(附代码)
本篇文章给大家带来的内容是关于js如何实现页面的滚动条下拉时加载更多(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在手机上,数据列表的分页都是下拉到底部的时候会加载更多,但是,去年三月份的时候遇到了客户要求web页面也要下拉加载更多的需求,于是按照web页面在滚动条下拉时加载更多内容(个人项目经验)文中的代码实现了这个下拉加载,很简单的,代码如下:
var totalPages;//总页数 var pageno = 0;//当前页数 $(function(){ $(window).scroll(function() { var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height(); var positionValue = (scrollTop + windowHeight) - scrollHeight; if (positionValue == 0) { //do something if (pageno < totalPages - 1) { pageno++; doSomething(pageno); } else { alert('没有更多了'); } } }); ); function doSomething(pageno) { var url = "*******";//分页列表的接口 var data = { size: 5, start: pageno, }; $.getJSON(url, data, function (rtn) { }); }
但是,今天测试人员发现,当浏览器缩放了或者屏幕显示设置缩放时,就不能下拉加载了。时隔一年多,真是惊人@_@
经过调试,发现是有缩放时positionValue
的值就无法等于0了,没法继续加载更多了,这时看到一篇文章下拉加载更多DEMO(js实现)中讲到:
看完后收到启发,于是将positionValue的值设为大于等于-10,这里的10也就是滚动条距离底部一定距离(C)的值。
果然,没问题了,有缩放时也可以正常实现下拉加载。
于是,记录下来,分享给大家,共勉。
另外提醒一点,$(window).scroll(function()监听滚动事件不执行这个问题中的采纳答案提到:
html,body的高度样式如果设置为100%,$(window).scroll
方法将检测不到正确的滚出高度(0),导致滚动监听事件失效,设置html,body{ height:auto }
可以解决。var totalPages;//总页数 var pageno = 0;//当前页数 var C = 10;//滚动条距离底部的距离 $(function(){ $(window).scroll(function() { var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height(); var positionValue = (scrollTop + windowHeight) - scrollHeight; if (positionValue >= -C) { //do something if (pageno < totalPages - 1) { pageno++; doSomething(pageno); } else { alert('没有更多了'); } } }); ); function doSomething(pageno) { var url = "*******";//分页列表的接口 var data = { size: 5, start: pageno, }; $.getJSON(url, data, function (rtn) { }); }
相关推荐:
jQuery向下滚动即时加载内容实现的瀑布流效果,jquery向下滚动
Atas ialah kandungan terperinci js如何实现页面的滚动条下拉时加载更多(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!