JavaScript实现元素滚动条到达一定位置循环追加内容


Posted in Javascript onDecember 28, 2017

如下所示:

<!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("div");
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>
<div 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>
</div>
</body>
</html>

以上这篇JavaScript实现元素滚动条到达一定位置循环追加内容就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决js正则匹配换行问题实现代码
Dec 10 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
js随机生成一个验证码
Jun 01 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
vue实现简单加法计算器
Oct 22 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 #Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 #Javascript
vue获取dom元素注意事项
Dec 28 #Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 #Javascript
webpack搭建vue 项目的步骤
Dec 27 #Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 #Javascript
js判断节假日实例代码
Dec 27 #Javascript
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
php类自动加载器实现方法
2015/07/28 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
node.js通过url读取文件
2020/10/16 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
.net C#面试题
2012/08/28 面试题
致短跑运动员广播稿
2014/01/09 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
数据保密承诺书
2014/06/03 职场文书
党性心得体会
2014/09/03 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
城管年度个人总结
2015/02/28 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
工作证明格式范文
2015/06/15 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书