记录一下获取 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. .NET Core的SqlSugar上手使用小例子

    开始直接建个空的WEB项目-建Controllers文件夹-开启MVC-添加NuGet程序包SqlSugarCore public class Startup { // This method get ...

  2. angularJs指令的Scope(作用域)

    每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然Angular ...

  3. ASP.Net Jquery 随机验证码 文本框判断

    // 登陆验证 $(function () { var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'a', 'B' ...

  4. RSA算法一：数学原理

  5. 个人项目 wc(java实现）

    一.Github网址: https://github.com/Clarazhangbw/Wc.exe 二.PSP表 PSP2.1 Personal Software Process Stages 预估 ...

  6. 浅谈HTTP中Get与Post的区别【转】

    转自http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html#commentform 感谢LZ分享 Http定义了与服务器交互的不同方法 ...

  7. Python with语句和__enter__、__exit__过程抽取思想

    with语句的应用场景   编程中有很多操作都是配套使用的,这种配套的流程可以称为计算过程,Python语言为这种计算过程专门设计了一种结构:with语句.比如文件处理就是这类计算过程的典型代表. 使 ...

  8. Linux命令——uname

    简介 uname用于输出系统信息. uname参数 -a :所有系统相关的资讯,包括底下的数据都会被列出来:-s :系统核心名称-r :核心的版本-m :本系统的硬件名称,例如 i686 或 x86_ ...

  9. Linux命令——blkid

    简介 blkid用于查看块设备UUID.Label.挂载.文件系统类型等信息 选项参数 无参数——显示所有已挂载分区信息 查看特定分区 -s:指定输出信息(UUID.TYPE.LABEL.PTTYPE ...

  10. Linux操作系统之grub加密实战案例

    Linux操作系统之grub加密实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.为grub设置明文密码案例 1>.修改"/boot/grub/grub. ...