js滚动加载(无限加载)(转)

2019-03-05 18:02:52 浏览数 (2)

实现无限分页的过程大致如下:

1 视窗滚动到底部

2 触发加载,添加到现有内容的后面。

因此,可能会出现两种情况:

1 当页面的内容很少,没有出现滚动条。

2 当页面的内容很多,出现了滚动条。

针对这两种情况,需要理解几个概念:

scrollHeight即真实内容的高度;

clientHeight比较好理解,是视窗的高度,就是我们在浏览器中所能看到内容的高度;

scrollTop是视窗上面隐藏掉的部分。

实现的思路:

1 如果真实的内容比视窗高度小,则一直加载到超过视窗

2 如果超过了视窗,则判断下面隐藏的部分的距离是否小于一定的值,如果是,则触发加载。(即滚动到了底部)

0 人点赞