获取页面scroll高度
记录一下获取 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高度的更多相关文章
- javascript 获取页面的高度及滚动条的位置的代码
http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载 javascript ...
- document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度
背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...
- js获取页面宽度高度及屏幕分辨率
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- javascript获取页面各种高度
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...
- JavaScript获取页面宽度高度
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- js获取页面高度赋值给div
<script type="text/javascript"> window.onload=function(){ map_width=document.body.cl ...
- jquery获取文档高度和窗口高度的例子
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
- jquery获取页面相关尺寸
$(windows).width();获取页面可视宽度 $(windows).height();获取页面可视高度 $(document).height();获取页面内容的总高度 $(document) ...
随机推荐
- Mysql向新建表中插入数据, Incorrect string value: '\xE5\xBC\xA0\xE4\xB8\x89' for column 'UserName' at row 1
在本地通过MYSQL创建测试表 CREATE Table User ( UserId int not NULL PRIMARY KEY auto_increment, //主键自增 UserName ...
- 2019 新华网java面试笔试题 (含面试题解析)
本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.新华网等公司offer,岗位是Java后端开发,最终选择去了新华网. 面试了很多家公司,感觉大部分公司考察的点都差 ...
- 关于创建Web图像时应记住的五个要素
1. 格式与下载速度 当前,Web上用的最广泛的三种格式是GIF.PNG和JPEG.我们的目标是选择质量最高,同时文件最小的格式. WebP图像格式 谷歌建立了另一种图像格式,名为WebP. 这种格式 ...
- Flask 进阶
OOP 面向对象反射 # __call__方法 # class Foo(object): # def __call__(self, *args, **kwargs): # return "i ...
- Code Clean读书笔记
代码整洁之道读书笔记 by fangpc 序言部分 "神在细节之中" - 建筑师路德维希 5S哲学(精益) 整理(Seiri):搞清楚事物之所在--通过恰当地命名之类的手段--至关 ...
- 为了做好精益化,精益达选择了它?(MES应用案例)
企业介绍 郑州精益达汽车零部件有限公司(下文简称“精益达”)是宇通客车重要的业务组成部分,也是宇通集团重要的支柱业务之一,主要从事汽车零部件产品研发.制造.销售与服务.在郑州市拥有三个生产厂区,工艺技 ...
- Maven的SNAPSHOT版本找不到
有时一个SNAPSHOT版本的包,明明打包部署到私服了,却还是报错找不到,比如: [WARNING] The POM for com.foo:bar:jar:0.4.0-20130404.093655 ...
- 记一次IntelliJ IDEA中文乱码问题
问题描述:输出控制台中文乱码,反正就是各种百度解决不了 问题解决:https://blog.csdn.net/m0_37893932/article/details/78280663 解决方案:我用的 ...
- ssm的maven项目启动tomcat时报错,Cannot find class: XXXX解决办法
最近在写一个ssm的项目,启动总是报错.原因网上查了也没找到.最后终于解决.下面直接上代码 问题描述: 严重: Allocate exception for servlet ssm-dispatche ...
- 第五次博客作业——Alpha2项目的测试
格式描述: 这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 你的代码我的发 这个作业的目标 选取非自己所在团队的3个项目进行测试,并写出 ...