JS简单实现滑动加载数据的方法示例


Posted in Javascript onOctober 18, 2017

本文实例讲述了JS简单实现滑动加载数据的方法。分享给大家供大家参考,具体如下:

//滑动
function getScrollTop()
{
 var scrollTop = 0;
 if (document.documentElement && document.documentElement.scrollTop) {
   scrollTop = document.documentElement.scrollTop;
  }else if (document.body) {
  scrollTop = document.body.scrollTop;
  }
  return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight()
{
 var clientHeight = 0;
 if (document.body.clientHeight && document.documentElement.clientHeight) {
   clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 }else {
   clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 }
   return clientHeight;
}
//获取文档完整的高度
function getScrollHeight()
{
   return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//绑定事件
window.onscroll = function ()
{
 if (getScrollTop() + getClientHeight() == getScrollHeight()) {
  //dosomething
 }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript中的prototype属性实例分析说明
Aug 09 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
Express的路由详解
Dec 10 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
详解cordova打包成webapp的方法
Oct 18 #Javascript
prototype.js简单实现ajax功能示例
Oct 18 #Javascript
浅谈JS函数节流防抖
Oct 18 #Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 #Javascript
详解Js中的模块化是如何实现的
Oct 18 #Javascript
JS跳转手机站url的若干注意事项
Oct 18 #Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 #Javascript
You might like
Banner程序
2006/10/09 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
js中let和var定义变量的区别
2018/02/08 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
如何解决vue在ios微信"复制链接"功能问题
2020/03/26 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python使用turtle绘制分形树
2018/06/22 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python图像和办公文档处理总结
2019/05/28 Python
python实现大量图片重命名
2020/03/23 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python识别验证码图片实例详解
2020/02/17 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
银行贷款承诺书
2014/03/29 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android
Mysql中mvcc各场景理解应用
2022/08/05 MySQL