js如何实现页面的滚动条下拉时加载更多（附代码）

来源：动视网责编：小采时间：2020-11-27 19:31:51

js如何实现页面的滚动条下拉时加载更多（附代码）

js如何实现页面的滚动条下拉时加载更多（附代码）:本篇文章给大家带来的内容是关于js如何实现页面的滚动条下拉时加载更多（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在手机上，数据列表的分页都是下拉到底部的时候会加载更多，但是，去年三月份的时候遇到了客户要求web页面

推荐度：

点击下载本文 文档为doc格式

导读js如何实现页面的滚动条下拉时加载更多（附代码）:本篇文章给大家带来的内容是关于js如何实现页面的滚动条下拉时加载更多（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在手机上，数据列表的分页都是下拉到底部的时候会加载更多，但是，去年三月份的时候遇到了客户要求web页面

本篇文章给大家带来的内容是关于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实现)中讲到：

如果等滚动条拉到底部时再加载，会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源，这时需要时间。一个更佳的方式是，当滚动条距离底部一定距离（C）时，就动态加载更多，向服务端请求资源。也就是预加载，预读取。公式如下
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) {
 
 });
}

js如何实现页面的滚动条下拉时加载更多（附代码）

推荐度：

点击下载本文 文档为doc格式

标签：加载页面的时候

热门焦点

js如何实现页面的滚动条下拉时加载更多（附代码）

js如何实现页面的滚动条下拉时加载更多（附代码）

代码

js如何实现页面的滚动条下拉时加载更多（附代码）

最新推荐

猜你喜欢

热门推荐