获取页面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) ...
随机推荐
- CentOS7配置网卡上网、安装wget、配置163yum源
2019/09/12,CentOS 7 VMware 摘要:CentOS7安装完成(最小化安装)后,不能联网(已选择桥接网络),需要修改配置文件及配置yum源 修改配置文件 进入网卡配置目录 cd / ...
- Nas 系统的虚拟化方案
Nas 系统的虚拟化方案 https://zhuanlan.zhihu.com/p/55025102 对搞技术的人来说,Nas 是个理想的玩具,既然是程序员用的 Nas ,自然要专业一点,不能像小白一 ...
- 想知道使用OPC服务器时如何设置DCOM?看完本文就懂了(下)
接上文...... “安全”选项卡“安全”选项卡上,有3个选项需要设置. 启动权限 选择“使用默认值”选项 访问权限 选择“使用默认值”选项 配置权限 选择“自定义”选项,然后单击“编辑” 将打开一个 ...
- mysql多实例启动过程
单机多实例,是基本的测试环境 01.myslq提供单机管理多节点 02.启动mysql多实例 03.观察进程
- Docker搭建私用仓库
搭建私有仓库 # 1.查找registry,官方的私用仓库镜像 docker search registry # 2.下载私有仓库镜像 docker pull registry # 3.创建并后台运行 ...
- 10 分钟上手 Vue 组件 Vue-Draggable
Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...
- 【Herding HDU - 4709 】【数学(利用叉乘计算三角形面积)】
题意:给出n个点的坐标,问取出其中任意点围成的区域的最小值! 很明显,找到一个合适的三角形即可. #include<iostream> #include<cstdio> #in ...
- 使用树莓派GPIO控制继电器
一.使用方法总结: VCC接+5v,GND接负,IN1接GPIO口, 二.然后使用Linux命令或者编程控制GPIO口高低电位即可,如:执行下列命令: gpio readall 列出所有针角 gp ...
- ARTS-week3
Algorithm 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件 ...
- Python 通过lxml 解析html页面自动组合xpath实例
#coding:utf-8 ''' @author: li.liu ''' from selenium import webdriver from selenium.webdriver.common. ...