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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
vue单页开发父子组件传值思路详解
May 18 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 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中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python中的id()函数指的什么
2017/10/17 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
用Python解决x的n次方问题
2019/02/08 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
金智子午JAVA面试题
2015/09/04 面试题
采购部部长岗位职责
2014/02/06 职场文书
优秀经理获奖感言
2014/03/04 职场文书
主题团日活动总结
2014/06/25 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
电力培训学习心得体会
2016/01/11 职场文书