JS简单实现滑动加载数据的方法示例
时间:2019-04-07
本文章向大家介绍JS简单实现滑动加载数据的方法示例,主要包括JS简单实现滑动加载数据的方法示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了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查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- (60) 随机读写文件及其应用 - 实现一个简单的KV数据库 / 计算机程序的思维逻辑
- java反射机制
- 突发 |“永恒之蓝”漏洞紧急应对方案
- 摩拜单车爬虫源码及解析
- 用Python实现微信接口(三)
- (61) 内存映射文件及其应用 - 实现一个简单的消息队列 / 计算机程序的思维逻辑
- ContentProvider简介
- (62) 神奇的序列化 / 计算机程序的思维逻辑
- js的回调函数详解
- 用Python实现微信接口(一)
- MYSQL常见错误及其解决方式
- 用Python实现微信接口(二)
- (63) 实用序列化: JSON/XML/MessagePack / 计算机程序的思维逻辑
- Quartz作业调度框架
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 暂未入坑记
- Python3脚本编程常用.md
- PS常用命令之文件和目录操作
- 快速掌握并发编程---synchronized篇(上)
- PS常用命令之WmiObject操作
- 『爬虫四步走』手把手教你使用Python抓取并存储网页数据!
- 快速掌握并发编程---synchronized篇(下)
- pivottablejs|在Jupyter中尽情使用数据透视表!
- 快速掌握并发编程---锁优化篇
- 弄懂这 6 个问题,拿下 Python 生成器!
- 快速掌握并发编程---线程阻塞与唤醒
- DOM优化之重绘和回流
- 本地储存之 Cookie、webStorage、indexedDB
- 使用DocumentFragment优化DOM操作
- 事件的防抖和节流