记录一下获取 scroll 高度的方法

经实际测试: document.body.scrollTop 在 chrome 下会返回0.

所以 document.documentElement.scrollTop 或者 window.pageYOffset 需要一起判断, 做一下兼容

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

获取视口区域的高度

    var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

获取一个元素的高度(一个元素距离顶部的高度, 这个是一定的, 决定了这个元素在页面的某一个位置)

document.querySelector("selector").offsetTop

应用:

如果scroll的高度大于了元素所在位置的高度, 那么需要进行加载 (lazy load)

获取页面scroll高度的更多相关文章

  1. javascript 获取页面的高度及滚动条的位置的代码

    http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载   javascript ...

  2. document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

    背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...

  3. js获取页面宽度高度及屏幕分辨率

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  4. javascript获取页面各种高度

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  5. JavaScript获取页面宽度高度

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  6. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  7. js获取页面高度赋值给div

    <script type="text/javascript"> window.onload=function(){ map_width=document.body.cl ...

  8. jquery获取文档高度和窗口高度的例子

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  9. jquery获取页面相关尺寸

    $(windows).width();获取页面可视宽度 $(windows).height();获取页面可视高度 $(document).height();获取页面内容的总高度 $(document) ...

随机推荐

  1. springcolud 的学习(四)服务治理. Eureka

    什么是服务治理在传统rpc远程调用中,服务与服务依赖关系,管理比较复杂,所以需要使用服务治理,管理服务与服务之间依赖关系,可以实现服务调用.负载均衡.容错等,实现服务发现与注册.服务注册与发现 在服务 ...

  2. DOS之del命令

    基本 del命令是用来删除一个或多个文件的,删除文件夹的话还要用rd命令. 举个栗子: 例如我们要删除C盘中的a.txt,我们就可以 del a.txt 也可以同时删除多个,用空格,逗号或分号分开文件 ...

  3. php xml解析

    XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...

  4. DEDECMS文章标题显示不全的原因以及解决方法

    首先这里说一下编码问题:UTF-8与GBK(通常为GB2312). GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准):GBK编码专门用来解决中文编码的,是双字节的 ...

  5. 英语eschaunge交易所

    eschaunge  Eschaunge是一个外文单词,名词译为交易所,交易,交换,兑换(率),动词译为兑换, 交换,互换,交换,调换.是Exchange的替代形式 中文名:交易所,交易,交换 外文 ...

  6. 关于Python学习之 列表与字典

    列表 列表是Python中最具灵活性的有序集合对象类型. # 列表迭代和解析 >>> res = [c*4 for c in 'Spam'] >>> res ['S ...

  7. MySQL--使用mysqldump进行数据库版本升级

    在MySQL跨版本升级时,建议使用mysqldump方式导出用户权限和用户数据,即使是小版本升级,导出过程中也应忽略系统数据库,避免系统表不兼容. 导出用户数据库脚本和用户创建脚本 ##======= ...

  8. 攻防世界WEB高手进阶之Zhuanxv

    1.一开始就是一个时钟界面 2.扫描目录发现/list 目录 打开是后台登陆,看了一下源码,也没发现什么,焦灼... 3.百度上搜了一波wp,发现原来在css里面藏了东西 后台的背景图片居然是这样读取 ...

  9. Java精通并发-通过openjdk源码分析ObjectMonitor底层实现

    在我们分析synchronized关键字底层信息时,其中谈到了Monitor对象,它是由C++来实现的,那,到底它长啥样呢?我们在编写同步代码时完全木有看到该对象的存在,所以这次打算真正来瞅一下它的真 ...

  10. MySQL的增、删、改、查

    数据库的常用命令以及作用 用法 作用 CREATE database 数据库名称. 创建新的数据库 DESCRIBE 表单名称; 描述表单 UPDATE 表单名称 SET attribute=新值 W ...