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 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
JS前端加密算法示例
Dec 22 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
Bootstrap基础学习
2015/06/16 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python3 判断列表是一个空列表的方法
2018/05/04 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python中数据库like模糊查询方式
2020/03/02 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python中常见错误及解决方法
2020/06/21 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
申请任职学生会干部自荐书范文
2014/02/13 职场文书
战略合作协议书范本
2014/04/18 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
离职感谢信
2015/01/21 职场文书
军事理论课感想
2015/08/11 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS