记录一下获取 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. 【初识算法】- AC算法

    原文地址:https://www.cnblogs.com/jily/p/6250716.html 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符 ...

  2. 【转载】WPS通过设置密码的方式对Excel文件加密

    有时候Excel文件中可能包含一些敏感数据,此时希望对Excel文件进行加入密码的形式进行加密保护,在WPS软件和Office Excel软件中都支持对Excel文件进行密码保护,设置了密码保护的Ex ...

  3. Vue学习之webpack中使用vue(十七）

    一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...

  4. SpringMVC+SpringBoot+MyBatis

    一.在框架中有时候会发现dao层和service层是相同的代码,为什么会同时存在呢?(以下https://blog.csdn.net/fanjieshanghai/article/details/88 ...

  5. 使用Mimikatz读取密码

    法一: https://github.com/gentilkiwi/mimikatz/releases/tag/2.1.1-20170813 第一条:privilege::debug //提升权限 第 ...

  6. elasticsearch获取字段missing的数据

    用head查询: demo如下 http://localhost:9200/sj_0505/lw_point_location/ _search post { "query": { ...

  7. day 01 预科

    目录 作业 二,Markdown基本语法 一级标题 二级标题 三级标题 作业 二,Markdown基本语法 标题 一级标题 二级标题 三级标题 四级标题 加粗 哦,更粗了 斜体 咦,我歪了 高亮 == ...

  8. ElasticSearch（十一）：Spring Data ElasticSearch 的使用（一）

    1.环境准备 我本地使用的环境为: 虚拟机版本:Centos 7.3 两台   IP 分别为:192.168.56.12, 192.168.56.13 Elasticsearch版本:6.4.0  ( ...

  9. Python_math模块

    1.math模块常用方法: import math #π的值 print(math.pi) #计算90度的正弦值 print(math.sin(math.pi/2)) #幂运算,2的十次方 print ...

  10. maven打包成可运行的jar

    在pom.xml添加 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</ ...