scrollHeight,clientHeight,scrollTop

scrollHeight,clientHeight,scrollTop移动端加载数据时,由于数据太多,不会一次性全部加载出来。有些会采用pc端那样用分页码的形式,但是更多的确实滑动滚动条到内容最后,加载更多内容出来。一般引入了三方的前端框架和插件,基本都会有此功能。偶尔会需要采用原生js实现,故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。原生js实现思路需要三个高度:scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、scrollTop(滚动条滚动距离)、clientHeight(窗口可视范围高度)。当clientHeig

大家好,又见面了,我是你们的朋友全栈君。

移动端加载数据时,由于数据太多,不会一次性全部加载出来。有些会采用pc端那样用分页码的形式,但是更多的确实滑动滚动条到内容最后,加载更多内容出来。一般引入了三方的前端框架和插件,基本都会有此功能。偶尔会需要采用原生js实现,故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。

原生js实现思路
需要三个高度:
scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、
scrollTop(滚动条滚动距离)、
clientHeight(窗口可视范围高度)。

当 clientHeight + scrollTop >= scrollHeight 时,表示已经抵达内容的底部了,可以加载更多内容。

scrollHeight:可以通过 document.documentElement.scrollHeight 、document.body.scrollHeight 获取;
clientHeight:可以通过window.innerHeight 、 document.documentElement.clientHeight 获取;
scrollTop:可以通过window.pageYOffset 、 document.documentElement.scrollTop 获取;

在这里插入图片描述

作者:郭先生_515
链接:https://www.jianshu.com/p/c59b2ccc963c
来源:简书

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/163754.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 一比一还原axios源码(四)—— Axios类

    axios源码的分析,到目前为止,算上第0章已经四章了,但是实际上,还都没有进入axios真正的主线,我们来简单回顾下。最开始我们构建了get请求,写了重要的buildURL方法,然后我们处理请求体请

    2022年3月25日
    38
  • java h2 数据库_Java H2数据库

    java h2 数据库_Java H2数据库介绍H2是Java编写的一款内嵌式数据库,支持内存和文件两种方式存储数据。SpringBoot整合pom.xmlorg.springframework.bootspring-boot-starter-data-jpacom.h2databaseh2runtimeapplication.ymlspring:datasource:#url:jdbc:h2:mem:testdburl:jdbc:h…

    2022年10月12日
    0
  • 初窥Linux 之 我最常用的20条命令

    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了。每个人玩Linux的目的都不同,所以他们常用的命令也就差异非常大,而我主要是用Linux进行C/C++和shell程序编写的,所以常用到的命令可以就会跟一个管理Linux系统的人有所不同。因为不想在使用是总是东查西找,所以在此总

    2022年4月4日
    30
  • 使用systemtap抓取ssh登录的用户名和密码

    使用systemtap抓取ssh登录的用户名和密码

    2021年8月26日
    49
  • tchar ANSI编码 Unicode编码「建议收藏」

    tchar ANSI编码 Unicode编码「建议收藏」因为C++支持两种字符串,即常规的ANSI编码(使用””包裹)和Unicode编码(使用L””包裹),这样对应的就有了两套字符串处理函数,比如:strlen和wcslen,分别用于处理两种字符串微软将这两套字符集及其操作进行了统一,通过条件编译(通过_UNICODE和UNICODE宏)控制实际使用的字符集,这样就有了_T(“”)这样的字符串,对应的就有了_tcslen这样的函数为了存储这样

    2022年9月23日
    0
  • Linux stat函数_linux C编程视频

    Linux stat函数_linux C编程视频linuxC函数之stat函数1.函数功能:通过文件名filename获取文件信息,并保存在buf所指的结构体stat中2.函数原型1)函数头文件#include#include2)函数intstat(constchar*file_name,structstat*buf)3)返回返回值:     执行成功则返回0,失败返回-1,错误代码存于errno错误代码:ENOENT  

    2022年8月21日
    9

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号