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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
传智播客学习之java 反射
Nov 22 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
Django实现文件上传和下载功能
2019/10/06 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python实现人机猜拳小游戏
2020/02/03 Python
python实现IOU计算案例
2020/04/12 Python
Python绘制动态水球图过程详解
2020/06/03 Python
自考生毕业自我鉴定
2013/10/10 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
人事任命通知
2015/04/20 职场文书
党员身份证明材料
2015/06/19 职场文书
地震捐款简报
2015/07/21 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python