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的一种模块模式
Sep 08 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
Angular2库初探
Mar 01 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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
dedecms模板标签代码官方参考
2007/03/17 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
秘书英文求职信
2014/04/16 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
街道社区活动报告
2015/02/05 职场文书
地球一小时活动总结
2015/02/27 职场文书
幼儿教师辞职信
2015/02/27 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
python图像处理 PIL Image操作实例
2022/04/09 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js