专栏首页山河木马js滚动加载(无限加载)(转)

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

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

1 视窗滚动到底部

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

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

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

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

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

scrollHeight即真实内容的高度;

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

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

实现的思路:

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js判断元素在某个区域内是否可见(转)

    getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素...

    山河木马
  • 前端之HTML DOM操作

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

    山河木马
  • canves 画视频(转)

    山河木马
  • Python3 与 C# 并发编程之~ 进程篇中

    接着上面继续拓展,补充说说获取函数返回值。 上面是通过成功后的回调函数来获取返回值,这次说说自带的方法:

    逸鹏
  • MySql协议详解-CRUD与Result篇

    一般对DB的CRUD操作都由com_query报文封装并发送给DB。com_query报文如下图所示:

    无毁的湖光-Al
  • Python学习心得(一)

    ~~缘 起~~ 2017年11月,一群编程零基础的小伙伴们成立了Python学习小组,12名学员从此夜以继日地奔赴学习的征程。一个月过去了,从在屏幕上用最简单的...

    企鹅号小编
  • 聊聊springboot jest autoconfigure

    spring-boot-autoconfigure-2.1.4.RELEASE-sources.jar!/org/springframework/boot/au...

    codecraft
  • NSA的第七种武器|双脉冲星(DoublePulsar) 后门详细分析

    1. 引言 NSA的一系列SMB 漏洞利用的背后,最后都会使用到双脉冲星(DoublePulsar)后门。双脉冲星后门是一个无文件内核级的SMB后门。 2. 双...

    FB客服
  • 23个最有用的Elasticseaerch检索技巧(上)

    本文主要介绍 Elasticsearch 23种最有用的检索技巧,提供了详尽的源码举例,并配有相应的Java API实现,是不可多得的 Elasticsearc...

    小旋锋
  • 前端迈进3D时代-Three.js初识

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景。 Three.js学习之前,我们需要了解他的三个关键对象: 1. 场景(场...

    Javanx

扫码关注云+社区

领取腾讯云代金券