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)
blank

相关推荐

  • cas认证 php,使用php处理cas认证[通俗易懂]

    cas认证 php,使用php处理cas认证[通俗易懂]最近项目要嵌入到平台上做一个应用,数据对接用ms-security(见上篇博客),登录则使用cas认证,今天就把完整代码放进来,也是走了好些个弯路的。代码的主要逻辑就是,当用户访问应用时,应用检测是否已登录,未登录则带上本地url跳转到cas登录中心,用户输入用户名、密码后,正确的话便带上ticket跳转到一开始带上的url(通常是该应用的登录接口),检测到ticket后便使用file_get_c…

  • vue怎么和后端对接_vue搭配什么后端

    vue怎么和后端对接_vue搭配什么后端简单分享一下jeeplus框架部署liunx服务器跨域问题 ,因为我这个是前后端服务器分离所以配置了俩份java后端配置1.跨域后端配置nginx(图-1)上配置 server { listen 80; server_name xxx.xx.xxx; #后端服务域名 #charset koi8-r; #access_log logs/host.access.log main; locatio

  • .NET框架体系结构

    刚开始接触.NET很疑惑,看完视频也不是太懂,通过总结和反复,从概括和概念入手,慢慢变得清晰了。这篇博客主要是我对.NET基础知识的了解,算作积累吧。.NET框架体系结构由四个主要部分组成公共语

    2021年12月23日
  • ajax怎么解决报414,关于c#:HTTP错误414。请求URL太长。 asp.net

    ajax怎么解决报414,关于c#:HTTP错误414。请求URL太长。 asp.net我收到错误”HTTP错误414。请求URL太长”。从下面的文章中,我了解到这是由于查询字符串很长所致:在web.config中,我有maxQueryStringLength=”2097151″。这是最大值吗?为了解决此问题,我应该在web.config中设置maxUrl吗?如果是这样,支持的最大值是多少?我该怎么办才能解决此错误?是否可以将URL中的某些长字符串替换为整数或Guid?如果…

  • 智慧职教云Java题库_云课堂智慧职教java职业证书题库答案

    智慧职教云Java题库_云课堂智慧职教java职业证书题库答案云课堂智慧职教java职业证书题库答案更多相关问题老子说“我有一颗愚人之心”,“若婴儿未孩”。下面哪一个选项最近此义:“大多数人都认为X是真的,所以X是真的。”属于()的论证方式。“大学语文”课程的前身是“大一国文”课程。()权益法下核算的长期股权投资,会导致投资企业投资收益发生增减变动的是( )“大众创业,万众创新”号召是在哪一年提出的?“大弦嘈嘈如急雨,小弦切切如私语。嘈嘈切切错杂弹,大珠小…

发表回复

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

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