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 相关文章推荐
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
儿童编程python入门
2018/05/08 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python Django 创建应用过程图示详解
2019/07/29 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
聚会通知怎么写
2015/04/23 职场文书
校园新闻稿范文
2015/07/18 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL