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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 阿里巴巴icon font导入CSS

    阿里巴巴icon font导入CSS1 先去 iconfont 官网随便找几个图标添加至购物车 2 点击购物车 添加至项目 3 点击 fontclass 然后生成链接 4 将生成的链接输入浏览器地址栏访问 5 然年后将上面的东西复制到 CSS 文件中 在其他文件中引入就可以辣 6 使用

    2025年6月9日
    3
  • pages enableEventValidation 事件的机制处理

    pages enableEventValidation 事件的机制处理回发或回调参数无效。在配置中使用或在页面中使用<%@PageEnableEventValidation=”true”%>启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用ClientScriptManager.RegisterForEventValidation方法来注册回发或回调数据以…

    2022年7月24日
    7
  • nvprof –help

    nvprof –helpUsage:nvprof[options][application][application-arguments]Options:–aggregate-mode&lt;on|off&gt;Turnon/offaggregatemodeforeventsandmetricsspecifiedbysubsequent"–events"and"–…

    2022年5月3日
    45
  • Win10禁止更新设备驱动的几种方式「建议收藏」

    Win10禁止更新设备驱动的几种方式「建议收藏」1、开始菜单选择运行并输入gpedit.msc打开本地组策略编辑器依次展开计算机配置→管理模板→Windows组件→Windows更新;找到并双击打开Windows更新不包括驱动程序;将未配置或者已禁用改成已启用,然后确定保存即可;右键点击开始菜单选择运行并输入RegEdit或者Cortana输入regedit进行搜索;进入注册表后依次展开:HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Wind

    2022年6月4日
    43
  • MySql数据库备份与恢复——使用mysqldump 导入与导出方法总结「建议收藏」

    MySql数据库备份与恢复——使用mysqldump 导入与导出方法总结「建议收藏」MySql数据库备份与恢复——使用mysqldump导入与导出方法总结mysqldump客户端可用来转储数据库或搜集数据库进行备份或将数据转移到另一个sql服务器(不一定是一个mysql服务器)。转储包含创建表和/或装载表的sql语句。ps、如果在服务器上进行备份,并且表均为myisam表,应考虑使用mysqlhotcopy,因为可以更快地进行备份和恢复。本文从三部分介绍了mys…

    2022年6月13日
    117
  • XmlDocument操作XML「建议收藏」

    XmlDocument操作XML「建议收藏」https://www.cnblogs.com/fengxuehuanlin/p/5631664.htmlC#XmlDocument操作XMLXML:ExtensibleMarkupLanguage(可扩展标记语言)的缩写,是用来定义其它语言的一种元语言,其前身是SGML(StandardGeneralizedMarkupLanguage,标准通用标记语言)。它没有标签集(t…

    2022年6月22日
    48

发表回复

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

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