当前位置： 首页 > news >正文

JS 原生实现触底加载

news 2026/5/20 13:22:16

  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>

触底加载

相关文章：

JS 原生实现触底加载

创建一个容器来存储列表项。 监听滚动事件&#xff0c;当滚动接近底部时触发加载更多操作。 加载更多数据后&#xff0c;将新数据附加到容器中。 以下是一个简单的示例&#xff1a; <!DOCTYPE html> <html><head><style>#scroll-container {heigh…...

编程日记 2023/10/13 16:14:40

结构体，位段！

目录 1.什么是位段&#xff1f; 别急&#xff01;在下面第二点我和大家介绍。 2.位段的内存怎么分配&#xff1f; 还有一种情况就是两种类型夹杂在一起的位段 3.位段的跨平台问题 4.位段能干嘛&#xff1f;&#xff08;应用&#xff09; 5.位段的注意事项 1.什么是位段&…...

编程日记 2023/10/13 16:13:40

当10年程序员是什么体验？存款几位数？

最近网上一个话题吸引了许多人的讨论&#xff0c;当10年程序员&#xff0c;是一种什么体验&#xff1f; 都说程序员的高收入和工作年限应该成正比&#xff0c;真的是这样吗&#xff1f;工作10年的程序员&#xff0c;工资应该是什么水平&#xff1f;不少网友纷纷“现身说法”..…...

编程日记 2023/10/13 16:12:39

ExoPlayer架构详解与源码分析（4）——整体架构

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…...

编程日记 2023/10/13 16:10:37

rust文件读写

std::fs模块提供了结构体File&#xff0c;它表示一个文件。 一、打开文件 结构体File提供了open()函数 open()以只读模式打开文件&#xff0c;如果文件不存在&#xff0c;则会抛出一个错误。如果文件不可读&#xff0c;那么也会抛出一个错误。 范例 fn main() {let file s…...

编程日记 2023/10/13 16:09:36

腾讯云我的世界mc服务器配置选择和价格表

开Minecraft我的世界服务器配置怎么选择&#xff1f;10人以内玩2核4G就够用了&#xff0c;开我的世界服务器选择轻量应用服务器就够了&#xff0c;腾讯云轻量应用服务器2核2G3M带宽轻量服务器一年95元&#xff0c;活动&#xff1a;txyfwq.com/go/tencent 轻量CPU采用至强白金处…...

编程日记 2023/10/13 16:08:34

基于安卓android微信小程序的旅游系统

项目介绍 随着人民生活水平的提高,旅游业已经越来越大众化,而旅游业的核心是信息,不论是对旅游管理部门、对旅游企业,或是对旅游者而言,有效的获取旅游信息,都显得特别重要.自助定制游将使旅游相关信息管理工作规范化、信息化、程序化,提供旅游景点、旅游线路,旅游新闻等服务本…...

编程日记 2023/10/13 16:07:33

文本编辑器去除PDF水印

用文本编辑器打开pdf&#xff0c;搜索水印的特殊文字&#xff0c;全部替换。 另外一个水印字母间有空格。 替换完后保存。 重新打开pdf&#xff1a;...

编程日记 2023/10/13 16:06:32

kubernetes负载感知调度

背景 kubernetes 的原生调度器只能通过资源请求来调度 pod&#xff0c;这很容易造成一系列负载不均的问题&#xff0c; 并且很多情况下业务方都是超额申请资源&#xff0c;因此在原生调度器时代我们针对业务的特性以及评估等级来设置 Requests/Limit 比例来提升资源利用效率。…...

编程日记 2023/10/13 16:05:31

Lock使用及效率分析(C#)

针对无Lock、Lock、ReadWriterLock、ReadWriterLockSlim四种方式&#xff0c;测试在连续写的情况下&#xff0c;读取的效率&#xff08;原子操作Interlocked由于使用针对int,double等修改的地方特别多&#xff0c;而且使用范围受限&#xff0c;所以本文章没有测试&#xff09; …...

编程日记 2023/10/13 16:03:28

安卓三防平板在行业应用中有哪些优势

在工业维修和检测中&#xff0c;安卓三防平板的应用也十分广泛。它可以搭载各种专业软件和工具&#xff0c;帮助工人们进行设备故障排查和维护&#xff0c;降低了维修成本和停机时间。 一、产品卖点&#xff1a; 1. 防水性能&#xff1a;该手持平板采用了防水设计&#xff0c;…...

编程日记 2023/10/13 16:02:28

2015架构真题（五十）

供应链中信息流覆盖了供应商、制造商和分销商&#xff0c;信息流分为需求信息流和供应信息流&#xff0c;&#xff08;&#xff09;属于需求信息流&#xff0c;&#xff08;&#xff09;属于供应信息流。 库存记录生产计划商品入库单提货发运单 客户订单采购合同完工报告单销售…...

编程日记 2023/10/13 16:01:27

VScode Invoke-Expression: 无法将参数绑定到参数“Command”，因为该参数为空字符串

打开vscode时发生错误&#xff1a;Invoke-Expression : 无法将参数绑定到参数“Command”&#xff0c;因为该参数为空字符串。 解决办法&#xff1a;在anaconda prompt base中输入&#xff1a; conda upgrade -n base -c defaults --override-channels conda...

编程日记 2023/10/13 15:59:24

【图像融合】差异的高斯：一种简单有效的通用图像融合方法[用于融合红外和可见光图像、多焦点图像、多模态医学图像和多曝光图像]（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/10/13 15:58:23

“Python+”集成技术高光谱遥感数据处理与机器学习深度应用丨高光谱数据预处理-机器学习-深度学习-图像分类-参数回归等12个专题

目录 第一章 高光谱数据处理基础 第二章 高光谱开发基础&#xff08;Python&#xff09; 第三章 高光谱机器学习技术&#xff08;python&#xff09; 第四章 典型案例操作实践 更多应用 本教程提供一套基于Python编程工具的高光谱数据处理方法和应用案例。 涵盖高光谱遥感…...

编程日记 2023/10/13 15:57:21

C语言_用于ADC数据的均值滤波算法

C语言_用于ADC数据的均值滤波算法 说明&#xff1a; 在采集ADC值的时候一般都是多次采集然后&#xff0c;然后取平均值&#xff0c;改进型做法就是去掉最大最小值剩下的再取平均值 unsigned short average(unsigned short arr[], unsigned char size) {unsigned int sum 0;for…...

编程日记 2023/10/13 15:56:19

【Rust基础②】流程控制、模式匹配

文章目录 4 流程控制4.1 if else表达式4.2 循环控制4.2.1 for循环4.2.2 while循环4.2.3 loop循环 5 模式匹配5.1 match和if let5.1.1 match匹配使用match表达式赋值模式绑定_通配符 5.1.2 if let 匹配5.1.3 matches! 宏 5.2 解构Option5.3 认识模式match 分支if let 分支while …...

编程日记 2023/10/13 15:55:18

Qt出现假死冻结现象

应用程序出现假死或冻结现象通常是由于一些常见问题所导致的。下面是一些可能的原因和解决方法&#xff1a; 长时间运行的任务在主线程中执行&#xff1a; 如果您在主线程中执行了长时间运行的任务&#xff0c;如文件操作、网络请求或复杂的计算&#xff0c;这可能导致应用程序…...

编程日记 2023/10/13 15:54:17

XML外部实体注入攻击XXE

xml是扩展性标记语言&#xff0c;来标记数据、定义数据类型&#xff0c;是一种允许用户对自己的标记语言进行定义的源语言。XML文档结构包括XML声明、DTD文档类型定义&#xff08;可选&#xff09;、文档元素&#xff0c;一般无法直接打开&#xff0c;可以选择用excl或记事本打…...

编程日记 2023/10/13 15:53:16

Hudi第三章：集成Flink

系列文章目录 Hudi第一章&#xff1a;编译安装 Hudi第二章&#xff1a;集成Spark Hudi第二章&#xff1a;集成Spark(二) Hudi第三章&#xff1a;集成Flink 文章目录 系列文章目录前言一、环境准备1.上传并解压2.修改配置文件3.拷贝jar包4.启动sql-client1.启动hadoop2.启动ses…...

编程日记 2023/10/13 15:52:15

贝壳季报图解：营收189亿 经调整净利16亿同比增15.7%

雷递网 雷建平 5月19日贝壳&#xff08;纽交所代码&#xff1a;BEKE&#xff1b;香港联交所代号&#xff1a;2423&#xff09;今日公布其截至2026年3月31日止第一季度未经审计财务业绩。财报显示&#xff0c;贝壳2026年第一季度贝壳实现净收入189亿元&#xff0c;净利润12.55亿…...

编程新知 2026/5/20 12:57:45

设计饮用水水质饮用习惯监测程序，统计每日饮水量，提醒科学补水养成健康习惯。

饮用水水质与饮水习惯监测程序——基于日志与规则的健康行为实验系统一、实际应用场景描述在现代城市生活中&#xff0c;很多人存在以下问题&#xff1a;- 不清楚自己每天喝了多少水- 饮水时间集中在晚上或运动后- 长期饮水不足或过量- 对水质来源缺乏基本记录意识本项目的目标…...

编程新知 2026/5/20 10:46:38

北京昌平浇筑阁楼测评：天顺诚达施工优但服务待提升，适合这类

本次测评聚焦于北京昌平区浇筑阁楼领域&#xff0c;旨在为对该服务感兴趣的人群提供客观、真实的数据和信息&#xff0c;帮助大家了解各相关企业的实际情况。参与本次测评的企业为北京天顺诚达建筑工程有限公司。需要声明的是&#xff0c;本次测评均基于真实数据与体验&#xf…...

编程新知 2026/5/20 10:11:54

告别键盘连击烦恼：KeyboardChatterBlocker 智能解决方案详解

告别键盘连击烦恼&#xff1a;KeyboardChatterBlocker 智能解决方案详解 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocker 你是否曾经在打…...

编程新知 2026/5/20 9:17:17

为什么我劝你放弃FLANN 1.9.2？聊聊源码编译那些坑与1.9.1版的真香选择

为什么FLANN 1.9.1才是开发者更明智的选择&#xff1a;深度解析编译陷阱与版本决策 在开源库的世界里&#xff0c;"最新版本"往往被默认为"最佳选择"&#xff0c;但FLANN 1.9.2却打破了这个常规认知。作为一名经历过无数次深夜调试的开发者&#xff0c;我必…...

编程新知 2026/5/20 8:43:49

淄博性价比高的别墅开发哪家强

淄博这几年改善置业需求越来越旺&#xff0c;不少攒了钱想换带院子的别墅&#xff0c;却普遍犯难&#xff1a;要么主城核心区的别墅单价破两万&#xff0c;一套下来几百万&#xff0c;门槛太高&#xff1b;要么远郊的小开发商别墅&#xff0c;要么产权不清、品质缩水&#xff0…...

编程新知 2026/5/20 7:20:55

华为BGP路由实战：从原理到策略调优的深度解析

1. 华为BGP路由技术入门指南 第一次接触华为BGP路由配置时&#xff0c;我被那些专业术语搞得晕头转向。经过多次实战后才发现&#xff0c;BGP就像互联网世界的邮局系统&#xff0c;负责在不同自治系统&#xff08;AS&#xff09;之间传递路由信息。华为设备的BGP实现特别适合企…...

编程新知 2026/5/20 6:53:54

告别树莓派5？手把手教你用OrangePi 5搭建家庭媒体中心（基于RK3588）

告别树莓派5&#xff1f;手把手教你用OrangePi 5搭建家庭媒体中心&#xff08;基于RK3588&#xff09; 在智能家居日益普及的今天&#xff0c;家庭媒体中心已成为许多科技爱好者的必备设备。传统的解决方案往往依赖于昂贵的商业NAS或性能有限的树莓派&#xff0c;而基于RK3588芯…...

编程新知 2026/5/20 6:42:27

【DC实战】时序约束文件编写：从理论到实践

1. 时序约束文件的重要性 在数字电路设计中&#xff0c;时序约束文件就像是给电路设计的一本"交通规则手册"。想象一下&#xff0c;如果没有红绿灯和限速标志&#xff0c;城市交通会乱成什么样子&#xff1f;时序约束文件的作用就是告诉DC&#xff08;Design Compile…...

编程新知 2026/5/20 6:24:34

保姆级避坑指南：树莓派4B+Ubuntu 22.04 LTS + 3.5寸屏，从开机到远程桌面一次搞定

树莓派4B与Ubuntu 22.04 LTS完美适配实战&#xff1a;从零搭建带屏远程开发环境 第一次接触树莓派和Ubuntu Server的新手们&#xff0c;往往会在搭建开发环境时遇到各种"坑"。本文将手把手带你绕过这些常见陷阱&#xff0c;用树莓派4B、3.5寸屏和Ubuntu 22.04 LTS打造…...

编程新知 2026/5/20 6:03:42