在JavaScript中如何实现元素滚动条循环追加内容
下面我就为大家分享一篇JavaScript实现元素滚动条到达一定位置循环追加内容，具有很好的参考价值，希望对大家有所帮助
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #eee;
}
#contents{
margin:30px auto;
width: 960px;
height:300px;
overflow:auto;
}
#list{
margin: 0;
padding: 0;
}
#list li{
color:#666;
list-style-type: none;
background-color: #ddd;
margin: 0;
margin-top:10px;
border-bottom: solid 1px #999;
text-align: center;
height:30px;
}
</style>
<script type="text/javascript">
//获取列表中的原有内容
window.onload=function(){
var contents=document.getElementById("list").innerHTML;
//每被调用一次，就将网页原有内容添加一份，这个大家可以写自己要加载的内容或指令
function appendcontent(){
document.getElementById("list").innerHTML+=contents;
}
document.getElementById("contents").onscroll=function(){
//content实际高度，
var contentscrollHeight=document.getElementById("contents").scrollHeight;
//contentclientHeight可视区高度，
var contentclientHeight=document.getElementById("contents").offsetHeight;
//滚动条距顶部高度
var contentscrollTop=document.getElementById("contents").scrollTop;
//通过判断滚动条的距离底部位置判断手否加载内容
var height=contentclientHeight+100;
if(contentscrollTop+height>=contentscrollHeight){
if(document.getElementById("list").childNodes.length>=150){
if(document.getElementById("nodata")){
}else{
var nodata=document.createElement("p");
nodata.id="nodata";
nodata.style.height="50px";
nodata.style.textAlign="center";
nodata.style.lineHeight="50px";
nodata.style.borderTop="1px solid #eee";
nodata.innerHTML="我是有底线的";
nodata.style.backgroundColor="#fff";
document.getElementById("list").appendChild(nodata);
}
console.log(document.getElementById("list").childNodes.length)
return;
}else{
appendcontent();
}
}
};
}
</script>
</head>
<body>
<p id="contents">
<ul id="list">
<li>张朋1</li>
<li>张朋2</li>
<li>张朋3</li>
<li>张朋4</li>
<li>张朋5</li>
<li>张朋6</li>
<li>张朋7</li>
<li>张朋8</li>
<li>张朋9</li>
<li>张朋10</li>
</ul>
</p>
</body>
</html>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是在JavaScript中如何实现元素滚动条循环追加内容的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Win11的启动路径以及如何打开它
Jan 03, 2024 pm 11:13 PM
每一个Windows系统都有一个启动路径，如果你在其中添加了文件或软件，就会在开机的时候打开它。不过不少朋友不知道win11启动路径在哪里，其实我们只需要进入C盘的对应文件夹就可以了。win11启动路径：1、双击打开“此电脑”2、直接将该路径“C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup”粘贴进路径框。3、这里就是win11启动路径了，如果我们要开机打开文件就可以将文件放进来。4、如果你根据这个路径进不来，可能是被隐藏了。
星穹铁道克劳克影视乐园折纸小鸟位置
Mar 27, 2024 pm 11:51 PM
星穹铁道克劳克影视乐园总共有20只折纸小鸟，有很多玩家不知道克劳克影视乐园折纸小鸟在哪，小编已经把每只折纸小鸟位置全部都总结出来了，帮助大家进行寻找，具体内容一起来看看这篇克劳克影视乐园折纸小鸟位置最新汇总。崩坏星穹铁道攻略大全星穹铁道克劳克影视乐园折纸小鸟位置1、克劳克影视乐园一层2、克劳克影视乐园二层
了解pip安装包存储的位置和结构
Jan 18, 2024 am 08:23 AM
深入了解pip安装的包存放位置，需要具体代码示例pip是Python语言常用的包管理工具，用于方便地安装、升级和管理Python包。在使用pip安装包时，它会自动从PyPI（Python包索引）下载对应的包文件，并将其安装到指定的位置。那么，pip安装的包究竟存放在哪里呢？这是很多Python开发者都会遇到的问题。本文将深入探讨pip安装的包存放位置，并提供
win11关机位置
Jan 10, 2024 am 09:14 AM
如果我们要长时间离开电脑，那么最好将电脑关机保护它，那么win11关机在哪里呢，其实一般来说只要打开开始菜单，在其中就可以找到关机按钮了。win11关机在哪里：答：在开始菜单的电源按钮里。1、首先我们点击底部任务栏的“windows徽标”打开“开始菜单”2、打开后，可以在右下角找到“电源”按钮，如图所示。3、点击电源按钮后，就能看到“关机”了，点击它就能关机。4、如果因为死机等特殊情况无法关机，那么可以直接用电脑上的“电源键”长按强制关机。
美团天天神券位置在哪_美团天天神券位置介绍
Mar 27, 2024 pm 05:11 PM
1、我们打开手机中的美团，然后在首页点击左上角的外卖选项。2、进入外卖的平台页面之后，在首页就可以看到有天天神券的板块了，直接点击。3、进入天天神券之后，就会看到很多的活动，点击完成，然后我们完成任务就可以获得奖励了。
最后纪元竞技场在哪
Mar 07, 2024 pm 08:16 PM
在《最后纪元》中，玩家可以玩多种形式，如游戏模式、挑战模式和竞技场等。竞技场则是游戏的终极玩法，提供两种模式供玩家选择。最后纪元竞技场在哪答：竞技场属于终局玩法，具体位置在冠军之门处。需要获取竞技场钥匙或记忆的竞技场钥匙，右键单击后可见世界地图，并能找到冠军之门的具体位置。竞技场分为两大模式：竞技场冠军模式和无尽竞技场模式。前者包括40波敌人与选择的奖励，总要在与竞技场冠军的较量中达到顶峰。竞技场冠军模式共有4阶段，难度越高，奖励越好。无尽竞技场是无限波次的模式，难度逐渐增加，成绩最好的挑战者将
win10日志文件在哪里
Jan 05, 2024 am 08:15 AM
win10的日志可以帮助用户详细的了解系统使用情况，可以帮助用户记录使用和问题，很多新用户可能不知道它是如何打开的吧，下面就一起来看看它的详细教程吧。win10日志文件在哪里：1、打开设置中的“控制面板”2、点击“管理工具”3、找到“事件查看器”4、双击“Windows日志”即可打开
快手发布于哪里怎么改位置？已经上传的视频怎么添加位置呢？
Mar 21, 2024 pm 06:00 PM
作为国内知名的短视频平台，快手为众多创作者提供了展示才华和分享生活的机会。在上传视频时，一些新手创作者可能会困惑于如何更改视频发布位置。本文将为您介绍快手视频发布位置的更改方法，并分享一些快手视频发布的技巧，帮助您更好地利用这个平台展示自己的作品。一、快手发布于哪里怎么改位置？1.发布界面：在快手APP中，点击“发布”按钮，进入视频发布界面。2.位置信息：在发布界面，有“位置”一栏，点击进入位置选择界面。3.更改位置：在位置选择界面，点击“定位”按钮，可以查看当前所在位置。如需更改位置，点击“位
