获取页面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) ...
随机推荐
- Ambari深入学习(I)-系统架构
Ambari是hadoop分布式集群配置管理工具,是由hortonworks主导的开源项目.它已经成为apache基金会的孵化器项目,已经成为hadoop运维系统中的得力助手,引起了业界和学术界的关注 ...
- springcolud 的学习(一),架构的发展史
一.传统架构 传统的SSH架构,分为三层架构 web控制层.业务逻辑层.数据库访问层. 传统架构也就是单点应用,就是大家在刚开始初学JavaEE技术的时候SSH架构或者SSM架构,业务没有进行拆分,都 ...
- P1108 低价购买 (DP)
题目 P1108 低价购买 解析 这题做的我身心俱惫,差点自闭. 当我WA了N发后,终于明白了这句话的意思 当二种方案"看起来一样"时(就是说它们构成的价格队列一样的时候),这2种 ...
- 【面试突击】- 2019年125条常见的java面试笔试题汇总(一)
1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部 问题,而只是选择其中的一部分,暂时不用部分细节.抽象包括两个方面,一是过程抽象,二 ...
- 简单后台管理系统框架--HTML练手项目2【Frameset】
[本文为原创,转载请注明出处] 技术[HTML] 布局[Frameset] 无步骤 <!DOCTYPE html> <html lang="en"> & ...
- 基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)
目录 事前准备 创建项目 利用MUI写一个简单的页面 关于文件打包 事前准备 # 软件 HBuilder X Web开发IDE 下载地址:https://www.dcloud.io/hbuilderx ...
- 什么是SAP Intelligent Robitic Process Automation - iRPA
所谓智慧企业,一个特征就是具备将复杂但低附加值的重复流程通过自动化的方式完成的能力.通过自动化,从而将宝贵的人力资源投入到更高附加值的工作中去,比如提供产品和服务的品质,提升用户体验.SAPGUI时代 ...
- ningx配置本地https环境
由于项目改成了https访问,所以本地开发的时候也要通过https验证,避免页面发送http请求. 例如原来是这样访问:http://192.168.88.88:8080/ 或 http://loca ...
- mysql表的连接
目录 1.笛卡尔积:将两表所有的数据一一对应,生成一张大表 2.连表查询 1.inner join 内连接 2.left join 左连接(left join左边的表为主表,主表记录必须全部显示,辅表 ...
- MySQL/MariaDB数据库的复制过滤器
MySQL/MariaDB数据库的复制过滤器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.复制过滤器概述 1>.复制器过滤器功能 让从节点仅复制指定的数据库,或指 ...