记录一下获取 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. kafka消费者问题

    [] 2019-12-17 15:40:01 - [INFO] [AbstractCoordinator:542 coordinatorDead] Marking the coordinator 机器 ...

  2. 学习笔记之Vim

    Vim (text editor) - Wikipedia https://en.wikipedia.org/wiki/Vim_(text_editor) Vim (/vɪm/;[4] a contr ...

  3. FI-FBV0 - No batch input data for screen SAPMF05A 0700

    在预制凭证过账的时候报错:没有屏幕SAPMF05A 0700 的批输入数据 https://answers.sap.com/questions/7203025/fbv0-no-batch-input- ...

  4. python错误日志记录工具，解决项目排错问题

    我们写项目的时候难免会遇到代码报错的问题,遇到这样的问题了如何快速的定位问题并解决问题呢? 我今天来整理了利用python只带的工具来解决这个问题,我能需要使用的库有: logging os 这些都是 ...

  5. C++ primer学习笔记_6_函数---函数定义、参数传递

    1. 习题参考: 6.14 举一个形参应该是引用类型的例子,再举一个形参不能是引用类型的例子. 答: 形参使用引用类型的情况:(1)避免拷贝传递大对象的时候,这里的string对象s:(2)当需要从函 ...

  6. GROUP BY HAVING,ORDER BY

    --HAVING语句与GROUP BY语句联合使用,用来过滤由GROUP BY语句返回的记录集. --并且HAVING语句的存在弥补了WHERE关键字不能与聚合函数联合使用的不足. ), SUM([C ...

  7. Linux下设置postgresql数据库开机启动

    PostgreSQL的开机自启动脚本位于PostgreSQL源码目录的contrib/start-scripts路径下,linux文件即为linux系统上的启动脚本: 1.将Linux文件复制到 /e ...

  8. CentOS7源码安装Redis5.0.4非关系型数据库

    源码安装redis-5.0.4 一. 下载redis 1. 需要连接网络 二. 案例(另一种安装方法) [root@localhost ~]# wget http://download.redis.i ...

  9. PAT甲级1011水题飘过

    题目分析:对于输入的数据分三条,选出每条中最大值记录下来,按照题目要求算出最大可能的获利即可 #include<iostream> using namespace std; ]; //k数 ...

  10. HTTP get post 请求实例

    package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...