html5滚动条加载数据,h5页面列表滚动加载数据

h5列表滚动加载数据很常见，以下分享下今天做的案例：

前言

这个效果实现需要知道三个参数

1. scrollTop -- 滚动条距离顶部的高度

2. scrollHeight -- 当前页面的总高度(body总高度)

3. clientHeight -- 当前可视的页面高度(设备窗口的高度)

html

css

#loading {

height: 32px;

line-height: 32px;

text-align: center;

}

js

//状态标记

var loading = true;

var start = 1;//当前页

var length = 5;//每页条数

//列表滚动加载数据

$(window).scroll(function () {

var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度

var scrollHeight = $(document).height(); //当前页面的总高度

var clientHeight = $(this).height(); //当前可视的页面高度

var totalHeight = parseFloat(clientHeight) + parseFloat(scrollTop);

if (scrollHeight - totalHeight < 40) { 注：-40 上拉加载更灵敏

if (!loading) {

loading = true;

<