AutoPager的简单实现

Firefox有个自动翻页的插件AutoPager，使用起来非常的方便。腾讯微博也有相同的功能，当鼠标滑动到底部时会自动展开下一页，如下图所示：

展开后如下所示：

这个功能虽然比较小，但是实现起来是非常有意思的事情，我们可以选择多种方法达到目的。下面我介绍一种简单的实现方式。

1、首先移动滚动条会触发window.onscroll事件。

2、我们可以根据滚动条滚动时屏幕位置和页面底部的距离来判断是否需要翻页。

需要用到三个函数：

1、pageHeight：页面总高度。

2、windowHeight：屏幕高度。

3、ScollY：页面滚动的高度。

pageHeight减去windowHeight减去ScollY即为当前屏幕底部到页面底部的距离，如下图所示：

下面我们可以来实现这个功能了，我们设置一个阈值来设定页面加载的次数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<ul id="ul-list">
</ul>
<mce:script type="text/javascript"><!--
var UI = {
pageHeight: function() {
return document.body.scrollHeight || document.documentElement.scrollHeight
},
windowHeight: function () {
var a = document.documentElement;
return self.innerHeight || a && a.clientHeight || document.body.clientHeight
},
scrollY: function (a) {
var b = document.documentElement;
if (a) {
var c = a.parentNode,
e = a.scrollTop || 0;
if (a == b) e = UI.scrollY();
return c ? e + UI.scrollY(c) : e
}
return self.pageYOffset || b && b.scrollTop || document.body.scrollTop
}
};

var ul = document.getElementById('ul-list');
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = 'hfahe';
ul.appendChild(li);
}

var scoll_time = 0;

window.onscroll = function() {
if(scoll_time < 10 & UI.pageHeight() - UI.scrollY() - UI.windowHeight() < 60) {
var ul_list = document.getElementById('ul-list');
var new_li = document.createElement('li');
new_li.innerHTML = Utils.randomChar(5);
ul_list.appendChild(new_li);

scoll_time++;
}
}
// --></mce:script>
</body>
</html>

样，我们就实现了AutoPager的功能。

剩下一个很有意思的问题，window.onscroll按照道理会在滚动条的每次移动时触发，那么在我们设定触发的高度内（例子里是60个像素），它会不会频繁的调用我们的方法呢？例如像腾讯微博一样的Ajax调用会不会多次出现呢？

AutoPager的简单实现相关推荐

在docker上安装部署tomcat项目超简单，拿来主义
在docker中部署tomcat,非常简单,而且省去了手动安装jdk等步骤,只需要将war包复制在容器tomcat实例中的webapps下面即可.以下将详细讲解流程: 在windows中打好包以后用w ...
Linux下tomcat的安装与卸载以及配置（超简单）
无敌简单的几步 1.安装 //首先你需要下载好tomcat包 sudo tar -xvzf apache-tomcat-7.0.85.tar.gz(这里是包名) -C 你要放的位置 2.卸载 rm - ...
Docker安装Apache与运行简单的web服务——httpd helloworld
Docker运行简单的web服务--httpd helloworld目录[阅读时间:约5分钟] 一.Docker简介二.Docker的安装与配置[CentOS环境] 三.Docker运行简单的web ...
Docker的安装、镜像源更换与简单应用
Docker的安装.镜像源更换与简单应用[阅读时间:约20分钟] 一.概述二.系统环境&项目介绍 1.系统环境 2.项目的任务要求三.Docker的安装四.Docker的简单应用 1. ...
基于Golang的简单web服务程序开发——CloudGo
基于Golang的简单web服务程序开发--CloudGo[阅读时间:约10分钟] 一.概述二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 (1)基本要求 (2)扩展要求三.具体 ...
简单图文配置golang+vscode【win10/centos7+golang helloworld+解决install failed等情况】
博客目录(阅读时间:10分钟) 一.win10 0.系统环境 1. win10配置golang环境 ①下载相关软件 ②创建gowork工作空间 ③配置环境变量(GOPATH+PATH) ④验证环境配置 ...
简单介绍互联网领域选择与营销方法
在我看来,互联网领域的选择是"安家",而营销方法的不同则表现了"定家"的方式多种多样,只有选对了,"家"才得以"安定". ...
JAVA用最简单的方法来构建一个高可用的服务端，提升系统可用性
一.什么是提升系统的高可用性 JAVA服务端,顾名思义就是23体验网为用户提供服务的.停工时间,就是不能向用户提供服务的时间.高可用,就是系统具有高度可用性,尽量减少停工时间.如何用最简单的方法来搭建 ...
java发送简单邮件_Java程序实现发送简单文本邮件
/** * Java程序实现发送简单文本邮件 * * @author Administrator * */ public class SendTextMail { // 定义发件人地址 public ...

AutoPager的简单实现

AutoPager的简单实现相关推荐

最新文章

热门文章