基于javascript实现浏览器滚动条快到底部时自动加载数据


Posted in Javascript onNovember 30, 2015

废话不多说了,直接给大家贴js代码了。

<!DOCTYPE html>
 <html>
 <head>
   <script src="jquery-...js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function () {
       var range = ;       //距下边界长度/单位px
       var elemt = ;       //插入元素高度/单位px
       var maxnum = ;      //设置加载最多次数
       var num = ;
       var totalheight = ;
       var main = $("#content");           //主体元素
       $(window).scroll(function () {
         var srollPos = $(window).scrollTop();  //滚动条距顶部距离(页面超出窗口的高度)
         //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
         //console.log("页面的文档高度 :"+$(document).height());
         //console.log('浏览器的高度:'+$(window).height());
         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滚动条当前位置距顶部距离+浏览器的高度
         if (($(document).height() - totalheight) <= range && num != maxnum) {//页面底部与滚动条底部的距离<range
           main.append("<div style='border:px solid tomato;margin-top:px;color:#ac" + (num % ) + (num % ) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
           main.append("<div style='border:px solid tomato;margin-top:px;color:#ac" + (num % ) + (num % ) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
           num++;
         }
       });
     });
   </script>
 </head>
 <body>
   <div id="content" style="height:px">
     <div id="follow">this is a scroll test;<br />  页面下拉自动加载内容</div>
     <div style='border:px solid tomato;margin-top:px;color:#ac;height:'>hello world test DIV</div>
   </div>
 </body>
 </html>

ps:原生JavaScript如何触发滚动条事件?

<script>
window.onscroll = function(){
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
var scrollH = document.documentElement.scrollHeight||document.body.scrollHeight;
var clientH = document.documentElement.clientHeight||document.body.clientHeight
//console.log(scrollT +"+"+scrollH+"+"+clientH);
if(scrollT == scrollH - clientH){
console.log("到底部了");
}else if(scrollT == 0){
console.log("到顶部了");
}
}
</script>
Javascript 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 #Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 #Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 #Javascript
浅析node连接数据库(express+mysql)
Nov 30 #Javascript
javascript编程异常处理实例小结
Nov 30 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
python关闭windows进程的方法
2015/04/18 Python
python 类详解及简单实例
2017/03/24 Python
带你认识Django
2019/01/15 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
法学专业自我鉴定
2014/02/05 职场文书
纠纷协议书
2014/04/16 职场文书
2014年征兵标语
2014/06/20 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Go语言中break label与goto label的区别
2021/04/28 Golang