js如何实现页面的滚动条下拉时加载更多(附代码)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js如何实现页面的滚动条下拉时加载更多(附代码),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2616字,纯文字阅读大概需要4分钟。
内容图文
本篇文章给大家带来的内容是关于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实现)中讲到:
this.scrollHeight - C == $(this).scrollTop() + $(this).height()
看完后收到启发,于是将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向下滚动
以上就是js如何实现页面的滚动条下拉时加载更多(附代码)的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的js如何实现页面的滚动条下拉时加载更多(附代码)全部内容,希望文章能够帮你解决js如何实现页面的滚动条下拉时加载更多(附代码)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。