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

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

1 视窗滚动到底部

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

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

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

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

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

scrollHeight即真实内容的高度;

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

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

实现的思路:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券