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)
上一篇 2022年7月23日 下午10:36
下一篇 2022年7月23日 下午10:36


相关推荐

  • 支持向量机(SVM)的分析及python实现「建议收藏」

    支持向量机(SVM)的分析及python实现「建议收藏」本文所有代码都是基于python3.6的,数据及源码下载:传送门引言今天我们算是要来分享一个“高级”的机器学习算法了——SVM。大家自学机器学习一般都会看斯坦福的CS229讲义,初学者们大都从回归开始步入机器学习的大门。诚然回归学习起来与使用起来都很简单,但是这能达到我们的目的么?肯定不够的,要知道,我们可以做的不仅仅是回归。如果我们把机器学习算法看作是一种带斧子,剑,刀,弓,匕首等的武器,你有各种

    2022年6月6日
    35
  • SpringBoot跨域设置(CORS)「建议收藏」

    SpringBoot跨域设置(CORS)「建议收藏」目录什么是跨域跨域资源共享(CORS)1.简单请求2.非简单请求SpringBoot设置CORS1.配置过滤器CorsFilter2.实现接口WebMvcConfigurer3.使用注解@CrossOrigin什么是跨域请求url的协议、域名、端口三者有任意一个不同即为跨域。跨域问题是因为浏览器的同源策略的限制而产生的。同源:请求url的协议、域名、端口三者都相同即为同源(同一个域)。同源策略:同源策略(Sameoriginpolicy)是一种约定,他是浏览器最核心也最基本的安全

    2022年6月18日
    28
  • softmax 函数

    softmax 函数机器学习分为两种 一种是做分类 一种是做回归 softmax 函数就是用来做分类的 softmax 函数定义 importnumpya np array 0 3 2 9 4 0 defsoftmax a c np max a exp a np exp a c sum exp a np sum exp a y e

    2026年3月16日
    3
  • C/C++中随机函数rand()和srand()的用法「建议收藏」

    C/C++中随机函数rand()和srand()的用法「建议收藏」一、rand()函数名:rand功能:随机数发生器用法:intrand(void);所在头文件:stdlib.h函数说明:rand()的内部实现是用线性同余法做的,它不是真的随机数,因其周期特别长,故在一定的范围里可看成是随机的。

    2022年4月29日
    44
  • 在线IEEE浮点二进制计算器工具「建议收藏」

    在线IEEE浮点二进制计算器工具「建议收藏」在线IEEE浮点二进制计算器工具在线IEEE浮点二进制计算器工具这是一个小计算器,旨在帮助您了解用于浮点计算的IEEE754标准。它是用JavaScript实现的,并且可以与Chrome和Firefox的最新桌面版本一起使用。我尚未在其他浏览器上进行过测试。如果您在左侧的三个框中之一中输入浮点数字,然后按Enter键,您将在右侧看到该数字的位模式。您可以输入使用通常在编程语言接受的语法,比如数字42,2.345,12E-3,等;您可以输入值NaN,Inf和-Inf直接;并且您还可以使用语法输入分

    2022年10月20日
    4
  • 超全,7种经典推荐算法模型及应用

    超全,7种经典推荐算法模型及应用本文调研了推荐系统里的经典推荐算法,结合论文及应用进行分析、归纳并总结成文,既是自己的思考过程,也可当做以后的翻阅手册。前言个性化推荐,是指通过分析、挖掘用户行为,发现用户的个性化需求与兴趣特点,将用户可能感兴趣的信息或商品推荐给用户。本文调研了推荐系统里的经典推荐算法,结合论文及应用进行分析、归纳并总结成文,既是自己的思考过程,也可当做以后的翻阅手册。俗话说学而时习之,人的认识过程是呈螺旋式上升的,特别是理论应用到实践的过程,理论是实践的基础,实践能反过来指导人对理论的认识,我相信在将下文所述的算法应

    2022年6月23日
    36

发表回复

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

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