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 相关文章推荐
基于jquery的商品展示放大镜
Aug 07 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
Jun 29 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 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按一定比例压缩图片的方法
2018/10/12 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python字符串替换实例分析
2015/05/11 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python中append实例用法总结
2019/07/30 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
电大自我鉴定范文
2013/10/01 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
师德师风学习材料
2014/12/19 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
个人更名证明
2015/06/23 职场文书
高中班主任心得体会
2016/01/07 职场文书
靠谱的活动总结
2019/04/16 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书