记录一下获取 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. CentOS7配置网卡上网、安装wget、配置163yum源

    2019/09/12,CentOS 7 VMware 摘要:CentOS7安装完成(最小化安装)后,不能联网(已选择桥接网络),需要修改配置文件及配置yum源 修改配置文件 进入网卡配置目录 cd / ...

  2. Nas 系统的虚拟化方案

    Nas 系统的虚拟化方案 https://zhuanlan.zhihu.com/p/55025102 对搞技术的人来说,Nas 是个理想的玩具,既然是程序员用的 Nas ,自然要专业一点,不能像小白一 ...

  3. 想知道使用OPC服务器时如何设置DCOM?看完本文就懂了(下)

    接上文...... “安全”选项卡“安全”选项卡上,有3个选项需要设置. 启动权限 选择“使用默认值”选项 访问权限 选择“使用默认值”选项 配置权限 选择“自定义”选项,然后单击“编辑” 将打开一个 ...

  4. mysql多实例启动过程

    单机多实例,是基本的测试环境 01.myslq提供单机管理多节点 02.启动mysql多实例 03.观察进程

  5. Docker搭建私用仓库

    搭建私有仓库 # 1.查找registry,官方的私用仓库镜像 docker search registry # 2.下载私有仓库镜像 docker pull registry # 3.创建并后台运行 ...

  6. 10 分钟上手 Vue 组件 Vue-Draggable

    Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...

  7. 【Herding HDU - 4709 】【数学(利用叉乘计算三角形面积)】

    题意:给出n个点的坐标,问取出其中任意点围成的区域的最小值! 很明显,找到一个合适的三角形即可. #include<iostream> #include<cstdio> #in ...

  8. 使用树莓派GPIO控制继电器

      一.使用方法总结: VCC接+5v,GND接负,IN1接GPIO口, 二.然后使用Linux命令或者编程控制GPIO口高低电位即可,如:执行下列命令: gpio readall 列出所有针角 gp ...

  9. ARTS-week3

    Algorithm 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件 ...

  10. Python 通过lxml 解析html页面自动组合xpath实例

    #coding:utf-8 ''' @author: li.liu ''' from selenium import webdriver from selenium.webdriver.common. ...