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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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/11/25 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Django Highcharts制作图表
2016/08/27 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
大专学生求职自荐信
2014/07/06 职场文书
统计学教授推荐信
2014/09/18 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2015年试用期工作总结
2014/12/12 职场文书
我的1919观后感
2015/06/03 职场文书
运动会通讯稿300字
2015/07/20 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android