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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 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函数学习之PHP函数点评
2012/07/05 PHP
php反射应用示例
2014/02/25 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
js实现select下拉框选择
2020/01/11 Javascript
Python MD5文件生成码
2009/01/12 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
详解python基础之while循环及if判断
2017/08/24 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python下载库的步骤方法
2019/10/12 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
电子信息专业自荐书
2014/02/04 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
清扬洗发水广告词
2014/03/14 职场文书
班主任开场白
2015/06/01 职场文书
如何写好闭幕词
2019/04/02 职场文书