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 触发HTML元素绑定的函数
Sep 11 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
js Math 对象的方法
Sep 01 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php统计文章排行示例
2014/03/04 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
小程序实现分类页
2019/07/12 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python实现自动登录
2018/09/17 Python
python 获取url中的参数列表实例
2018/12/18 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
材料专业毕业生求职信
2014/02/26 职场文书
共产党员承诺书
2014/03/25 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
利用JavaScript写一个简单计算器
2021/11/27 Javascript
MySQL数据库之存储过程 procedure
2022/06/16 MySQL