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代码
Mar 27 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
前端性能优化及技巧
May 06 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
微信小程序websocket实现即时聊天功能
May 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP循环结构实例讲解
2014/02/10 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP使用函数用法详解
2018/09/30 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
python抓取百度首页的方法
2015/05/19 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
python实现kMeans算法
2017/12/21 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python动态规划算法实例详解
2020/11/22 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
经销商订货会主持词
2014/03/27 职场文书
推荐信格式范文
2014/05/09 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
先进工作者事迹材料
2014/12/23 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
开学随笔
2015/08/15 职场文书
2016关于军训的心得体会
2016/01/11 职场文书