基于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 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 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
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
浅谈php提交form表单
2015/07/01 PHP
php cookie 详解使用实例
2016/11/03 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python实现bucket排序算法实例分析
2015/05/04 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python tornado上传文件的功能
2020/03/26 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
个人委托书怎么写
2014/04/04 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
死亡诗社观后感
2015/06/05 职场文书
python获取对象信息的实例详解
2021/07/07 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android