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 相关文章推荐
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
小程序实现五星点评效果
Nov 03 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
微信小程序vant弹窗组件的实现方式
Feb 21 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 图片上添加透明度渐变的效果
2009/06/29 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python异常处理操作实例详解
2018/08/28 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Python二元算术运算常用方法解析
2020/09/15 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
副厂长岗位职责
2014/02/02 职场文书
入党介绍人评语
2014/05/06 职场文书
中专生自荐信
2014/06/25 职场文书
男生贾里读书笔记
2015/06/30 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python