JS 原生实现触底加载

  1. 创建一个容器来存储列表项。

  2. 监听滚动事件,当滚动接近底部时触发加载更多操作。

  3. 加载更多数据后,将新数据附加到容器中。

以下是一个简单的示例:

<!DOCTYPE html>
<html><head><style>#scroll-container {height: 200px;overflow: auto;}.item {height: 50px;background: #eee;margin-bottom: 10px;}</style>
</head><body><div id="scroll-container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div><!-- Add more items here --></div><script>const scrollContainer = document.getElementById("scroll-container");scrollContainer.addEventListener("scroll", () => {// scrollContainer.scrollTop : 当前可视化到容器最顶部的距离// scrollContainer.clientHeight : 当前可视化的高度// scrollContainer.scrollHeight : 当前容器的滚动高度if (scrollContainer.scrollTop + scrollContainer.clientHeight >=scrollContainer.scrollHeight) {// Load more data and append it to the containerfor (let i = 0; i < 5; i++) {const newItem = document.createElement("div");newItem.className = "item";newItem.textContent = `Item ${scrollContainer.childElementCount + 1}`;scrollContainer.appendChild(newItem);}}});</script>
</body></html>

触底加载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/103332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SyntaxError: invalid character ‘:‘ (U+FF1A)问题解决

问题&#xff1a; SyntaxError: invalid character &#xff1a; (UFF1A) 原因及解决方法&#xff1a; 冒号输入的格式不对&#xff0c;冒号的输入为中文&#xff0c;改成英文即可。

Design patterns--策略模式

设计模式之策略模式 笔者经常使用Modbus TCP和Modbus RTU通信协议&#xff0c;而两种的请求数据的格式不一样&#xff0c;故而采用策略模式来健壮整个工程项目。 代码示例 #ifndef MODBUS_H #define MODBUS_H #include <string>std::string convertToHex(unsigned char…

[GAMES101]透视投影变换矩阵中为什么需要改变z值

一、问题提出 在GAMES101-Lecture4 Transformation Matrices 一节中&#xff0c;闫老师介绍了正交投影和透视投影。 在讲透视投影变换矩阵 M p e r s p → o r t h o M_{persp→ortho} Mpersp→ortho​时&#xff0c;同学们对矩阵中的z分量是变化的还是不变的有很多争论。即下…

【vim 学习系列文章 6 -- vim 如何从上次退出的位置打开文件】

文章目录 1.1 vim 如何从上次退出的位置打开文件1.2 autogroup 命令学习1.2.1 augroup 基本语法 1.3 vim call 命令详细介绍 1.1 vim 如何从上次退出的位置打开文件 假设我打开了文件 test.c&#xff0c;然后我向下滚动到第 50 行&#xff0c;然后我做了一些修改并关闭了文件。…

数据一致性分发

为什么要数据分发 微服务中&#xff0c;每个服务都有独立的数据源&#xff0c;这使得数据同步成为难题。 拉模式or推模式&#xff1f; 拉模式存在的问题 由于网络延迟&#xff0c;拉取的数据不一定是最新的 如果频繁向另一服务拉取数据&#xff0c;会给服务造成压力&#xf…

Python报“IndentationError: unexpected indent”问题解决

问题&#xff1a; IndentationError: unexpected indent 原因&#xff1a; 缩进错误&#xff1a;意外缩进 Python是一种对缩进非常敏感的语言&#xff0c;没有分号和大括号作为语句分割和层级标识&#xff0c;只能对代码格式进行严格规范&#xff0c;最常见的情况是tab和空格…

保护敏感数据的艺术:数据安全指南

多年来&#xff0c;工程和技术迅速转型&#xff0c;生成和处理了大量需要保护的数据&#xff0c;因为网络攻击和违规的风险很高。为了保护企业数据&#xff0c;组织必须采取主动的数据安全方法&#xff0c;了解保护数据的最佳实践&#xff0c;并使用必要的工具和平台来实现数据…

大模型时代的开发者:从飞桨PPDE到文心布道师

飞桨开发者技术专家&#xff08;PPDE&#xff09;谢杰航研究方向为AI城市规划、景观设计、生态环境及农业等领域的应用落地。他在此前Wave Summit 2023深度学习开发者大会上为大家带来了主题为《大模型时代的开发者&#xff1a;从飞桨PPDE到文心布道师》的演讲。本次演讲共分为…

解决MySQL错误-this is incompatible with sql_mode=only_full_group_by

报错 Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column ‘数据库名.表名.字段名’ which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_modeonly_full_group_by 原因 MySQL错误-t…

Java架构师缓存性能优化

目录 1 缓存的负载策略2 缓存的序列化问题3 缓存命中率低4 缓存对数据库高并发访问5 缓存数据刷新的策略5.1. 实时策略5.2. 异步策略5.3. 定时策略6 何时写缓存7 批量数据来更新缓存8 缓存数据过期的策略9 缓存数据如何恢复10 缓存数据如何迁移11 缓存冷启动和缓存预热1 缓存的…

全新整合热搜榜单热门榜单内容系统聚合源码/带教程安装

源码简介&#xff1a; 在移动互联网时代&#xff0c;我们每天都会接收到大量的信息&#xff0c;但是想要知道哪些是最热门的话题和内容&#xff0c;往往需要花费很多精力去搜索和筛选。因为有这个需要&#xff0c;一个全新整合热搜榜单热门榜单内容系统聚合源码就应运而生了&a…

ORACLE逻辑存储结构

存储结构 1数据文件 数据库存储逻辑结构是表空间-段-区段-块,数据库文件包括控制文件,联机重做日志,数据文件等。我们主要讲数据文件 1.1表空间 我们在搭建环境的第6节,创建了表空间apps_data_tablespace,创建语法中包含了数据库文件APPS_DATA_TABLESPACE.dbf,所有在…

PMP证书有什么用?考试条件是什么?

PMP证书摆在明面上的一个用处就是在招聘项目经理岗或者PMO岗的岗位要求中都会有一条&#xff1a;持有PMP证书优先。面试的时候&#xff0c;如果两个候选人的经历、经验、期望薪资都差不多&#xff0c;那么HR就会更倾向于有PMP/ACP等证书的候选人。 PMP是什么&#xff1f; PMP是…

LabVIEW将视觉生成器AI用作OPC服务器

LabVIEW将视觉生成器AI用作OPC服务器 介绍如何将视觉生成器AI配置为OPC服务器&#xff0c;并使用共享变量共享视觉生成器AI生成的结果。OPC是一系列标准规范&#xff0c;定义了来自不同制造商的控制设备之间的实时数据通信。OPC数据访问通信是基于客户端服务器的通信。 共享系…

whistle安卓手机抓包(图文详解)

1、安装node https://nodejs.org &#xff08;官网下载对应的node,一般推荐长期稳定版本 LTS&#xff09; 需要node的版本是大于 v0.10.0 查看自己本地node 版本号 node -v2、安装whistle npm i -g whistle3、开启whistle 补充说明&#xff1a; ● w2 stop&#xff1a;关闭…

XML是不是主要用做配置文件?

2023年10月11日&#xff0c;周三下午 这几天发现tomcat的配置文件主要是用XML文件来写的&#xff0c; 于是就有了这个问题。 是的,XML非常适合用来做配置文件。 XML作为配置文件的主要优点: 可读性强。XML使用标签结构组织数据,内容清晰易懂。跨语言和跨平台。XML作为纯文本…

Servlet的部署与安全

1 Servlet 部署 Servlet规范关于各个东西该放在哪里有许多严格的规则。 1.1 WAR war文件代表Web归档(Web Archive)&#xff0c;war实际就是一个JAR&#xff0c;只不过扩展名是.war而不是.jar。 其采用了一种可移植的压缩形式&#xff0c;把整个Web应用结构&#xff08;去掉…

相似与不同:数字孪生和元宇宙的对比

数字孪生和元宇宙是两个备受瞩目的概念&#xff0c;都在数字领域产生了巨大的影响。它们有一些相似之处&#xff0c;但也存在显著的不同。本文将介绍它们的相同点和不同点&#xff0c;以及它们在不同应用领域的前景。 1. 相同点 虚拟性质&#xff1a; 数字孪生和元宇宙都是虚…

PostgreSQL基操之角色、表空间、数据库与表

PostgreSQL基操之角色、表空间、数据库与表 角色创建与管理表空间创建与管理数据库创建与管理表创建与管理 角色创建与管理 PostgreSQL数据库里没有User的概念&#xff0c;只有Role的概念。有的Role可以用于登录数据库&#xff0c;这些Role与其他数据库中的用户等价。 --创建…

星戈瑞Annexin V-FITC细胞凋亡检测试剂盒

Annexin V-FITC 试剂盒提供检测凋亡细胞所需的所有试剂。Annexin V 是 Ca2 依赖性磷脂结合蛋白。该蛋白质可以与多种磷脂结合&#xff0c;但它对磷脂酰丝氨酸 (PS) 的亲和力最高。Annexin V-FITC 试剂盒能够以 Ca2 依赖性的方式结合至带负电荷的磷脂表面结合。它还可防止凝血酶…