记录一下获取 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. C# vb .net实现透明特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的透明效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...

  2. selenium中元素操作之简单的鼠标、键盘操作（三）

    1.鼠标操作导入类:ActionChains --鼠标的操作形成一连串的动作链,由selenium的ActionChains类来完成模拟鼠标操作手表操作的过程:1.鼠标的操作,先放到一个列表中2.利用 ...

  3. JAVA基础之HttpServletRequest请求

    HttpServletRequest请求是获取请求行.请求头和请求体:可以通过这个方法设置防盗链,获取地址.牢记解决乱码的方式. 怎么选择是重定向还是转发呢?通常情况下转发更快,而且能保持reques ...

  4. Mac音频播放

    Mac音频播放 audioqueue播放pcm数据 http://msching.github.io/blog/2014/08/02/audio-in-ios-5/ audiounit播放pcm数据  ...

  5. nrm 工具的使用

    一.什么是nrm? 这是官方的原话: 开发的npm registry 管理工具 nrm, 能够查看和切换当前使用的registry, 最近NPM经常 down 掉, 这个还是很有用的哈哈 顾名思义,就 ...

  6. 【Flask】 python学习第一章 - 6.0 WTF表单 数据库 蓝图

    WTF表单  wtf.py pip install flask-wtf  # 安装 from flask_wtf import FlaskForm from wtform import StringF ...

  7. suctf2019 部分web题目的复盘

    1.简单的SQL注入 一开始一直没思路,输入什么过滤什么,结束后看了大佬们的wp,感觉学到了,这里涉及到Mysql中的一个特殊模式的设置 set sql_mode=pipes_as_concat; 这 ...

  8. ReqMan — 需求提取和协同处理工具

            ReqMan是由德国engineering method AG公司开发的一款高效的.可自由定制的需求提取和协同处理工具.ReqMan 能够将PDF.Word.Excel等格式的文档提取 ...

  9. 《Java程序设计实验》 软件工程18-1,3 OO实验2

  10. 洛谷 P1443 马的遍历题解

    题目链接:https://www.luogu.org/problem/P1443 题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个 ...