记录一下获取 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. 常用正则表达式和一些demo

    一.校验数字的表达式 数字:^[0-9]*$ n位的数字:^\d{n}$ 至少n位的数字:^\d{n,}$ m-n位的数字:^\d{m,n}$ 零和非零开头的数字:^(0|[1-9][0-9]*)$ ...

  2. jquery.pagination.js分页demo

    公用jquery.pagination.js /** * This jQuery plugin displays pagination links inside the selected elemen ...

  3. StopWatch方法详解

    namespace System.Diagnostics { // // 摘要: // 提供一组方法和属性,可用于准确地测量运行时间. public class Stopwatch { // // 摘 ...

  4. provide inject应用及和props对比

    之前本人写过几篇element ui源码解析,其中提到provide/inject,当时只是匆匆带过,没有做深入研究,直到后来一次开发,需要实现孙组件更改父组件的值才想起来,原来这一对属性有如此大的用 ...

  5. docker管理监控方案

    docker相关管理可分为四类:docker基础功能.docker监控.docker集群管理和docker系统认证管理.docker管理的基础或信息来源都是docker命令行或docker API. ...

  6. Linux IO 概念(1)

    基础概念 文件描述fd 文件描述符(file description),用于表述指向文件引用的抽象话题概念 文件描述符在形式上是一个非负整数,实际上它是一个索引值,指向内核为每一个进程所维护的该进程打 ...

  7. Gerrit服务器权限管理

    Gerrit服务器权限管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Gerrit权限概述 1>.对象 Gerrit识别单个或多个人员集合. Gerrit不允许使用单 ...

  8. 面向切面编程AOP——加锁、cache、logging、trace、同步等这些较通用的操作，如果都写一个类，则每个用到这些功能的类使用多继承非常难看，AOP就是解决这个问题的，python AOP就是装饰器

    面向切面编程(AOP)是一种编程思想,与OOP并不矛盾,只是它们的关注点相同.面向对象的目的在于抽象和管理,而面向切面的目的在于解耦和复用. 举两个大家都接触过的AOP的例子: 1)java中myba ...

  9. DT6.0框架留言模块漏洞修复

    今天早上登入后台,留言被国外乱码注入一大堆,很烦人,得去数据库清空.所以仔细检查dt的留言模块,找到解决办法. 在:module/extend/guestbook.inc.php 大约第10行左右 i ...

  10. ElementUI——报错汇总

    前言 elementUI的报错汇总 错误 please transfer a valid prop path to form item! vue.esm.js?c5de:628 [Vue warn]: ...