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
来源:简书

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 瑞芯微rk3399pro_arm主板定制开发

    瑞芯微rk3399pro_arm主板定制开发深圳市宁远电子科技有限公司于2015年在中国广东省深圳市成立,公司自成立以来一直专注于工业嵌入式产品的软硬件研发和生产,以及相应的增值服务。公司拥有强大的研发技术实力,创始团队来自于华为,三星十年工作经验以上资深研发人员。  深圳市宁远电子科技有限公司专注于工来控制产品的研发,是ARM在中国最具实力的方案公司.  公司定位于中高端产品的研发,基于RK3288,RK3399等处理器,,开发了…

    2022年10月14日
  • Android Studio 和 Gradle 优化配置总结

    Android Studio 和 Gradle 优化配置总结

  • Java虚拟机(JVM)面试题(2020最新版)

    文章目录Java内存区域说一下JVM的主要组成部分及其作用?说一下JVM运行时数据区深拷贝和浅拷贝说一下堆栈的区别?队列和栈是什么?有什么区别?HotSpot虚拟机对象探秘对象的创建为对象分配内存处理并发安全问题对象的访问定位句柄访问直接指针内存溢出异常Java会存在内存泄漏吗?请简单描述垃圾收集器简述Java垃圾回收机制GC是什么?为什么要GC垃圾回收的优点和原理。并考虑2种回收机制垃圾…

  • C语言编程中void什么意思,程序设计中遇到的void到底是什么意思

    C语言编程中void什么意思,程序设计中遇到的void到底是什么意思部分编程的初学者都会问”void是什么意思”,”为什么很多函数前都要加个void”.实际上,void最简单的解释就是把0转换成空类型的意思。下面用各个开发语言来详解void1.C语言中的void表示空类型,它跟int,float是同地位的,一般用在没有返回值的函数中,比如你写voidmain(),主函数完了不用写return语句,但是如果是intmain()或者是main(),你不写r…

  • 完美解决方案_onActivityResult

    完美解决方案_onActivityResult在Service中启动Activity,会报错如下:Intentintent=newIntent(MyService.this,Main2Activity.class);startActivity(intent);…

  • python ==和is_python中isdigit函数

    python ==和is_python中isdigit函数前置知识点当我们创建一个对象时,我们要知道它内部干了些什么1.创建了一个随机id,开辟了一片内存地址2.自动声明了这个对象的类型type3.给这个对象赋值value小例子a=1pri

发表回复

您的电子邮箱地址不会被公开。

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