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学习笔记1 数据类型
Jan 11 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
js实现图片无缝循环轮播
Oct 28 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python 字典访问的三种方法小结
2019/12/05 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
有兼职工作经历的简历自我评价
2014/03/07 职场文书
团日活动总结范文
2014/04/25 职场文书
大学生个人求职信
2014/06/02 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
英文辞职信范文
2015/05/13 职场文书
紧急迫降观后感
2015/06/15 职场文书
2016年学校招生广告语
2016/01/28 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
5道关于python基础 while循环练习题
2021/11/27 Python