document.documentElement与body下clientHeight,scrollHeight等区别
本次说明仅在chrom环境下,ie等其他浏览器可能不同
1获取显示屏高度(pc和移动端,屏幕分辨率px)
window.screen.height => 这个好理解,不多说。
2获取浏览器可视窗口高度(PC端)
document.documentElement.clientHeight => 就是网页在浏览器中可见高度,不包括浏览器自身的状态栏,随着浏览器大小变化;
3获取网页内容高度
1)document.documentElement.scrollHeight = document.documentElement.offsetHeight => 就是整个网页文档body的高度,随着网页内容的多少变化,包括网页内的所有border,margin,padding;
2)body.clientHeight = body.offsetHeight => body的内容高度,不包括margin和border值,实际上就是body的height值;
3)body.scrollHeight => 包括body的margin,body值,;
a 当网页内容超出浏览器可视窗口高度值时,= body.clientHeight+margin+border = document.documentElement.scrollHeight ;
b 当网页内容较少未超出时,= document.documentElement.clientHeigh 也就是浏览器窗口高度值(这是它的最小值);
4滚动条的高度值
document.docuemtnElement.scrollTop => 页面滚动上去的高度值;
这几个属性在前段开发中的应用场景:
1)下拉加载(移动端上拉加载),就是通过判断元素是否显示在当前可视窗口内,读取数据并显示
2)图片的懒加载——前端网页优化的一种手段,也是判断用户浏览的内容区域是否显示在可视窗口中,替换图片src属性值。
需要注意的是:pc端获取可视出口高度可使用document.documentElement.clientHeight,移动端不要使用该属性(亲测该值很高远远超过显示器的高度iphone6达到1743px),使用window.screen.height获取手机显示的高度.
document.documentElement与body下clientHeight,scrollHeight等区别的更多相关文章
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
- 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight
测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight
IEdocument.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度document.do ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- document.documentElement.clientHeight||document.documentElement.scrollHeight
在我看<JavaScript高级程序设计>(第三版)的时候,在clientHeight和scrollHeight那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...
- document.documentElement.clientHeight和document.body.clientHeight区别
首先了解下document HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档节点. 所有的HTML元素都是元 ...
- document.body.clientHeight和 document.documentElement.clientHeight 的区别
1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...
随机推荐
- springMVC入门截图
mvc在bs系统下的应用 ---------------------------------------------------- 在web.xml中配置前端控制器(系统提供的一个servlet类 ...
- poj--3678--Katu Puzzle(2-sat 建模)
Katu Puzzle Time Limit: 1000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Submit S ...
- java 中的静态(static)代码块
类字面常量 final 静态域不会触发类的初始化操作 非 final static 静态域(以及构造器其实是一种隐式的静态方法) Class.forName():会自动的初始化: 使用 .class来 ...
- DB-MySQL:MySQL 复制表
ylbtech-DB-MySQL:MySQL 复制表 1.返回顶部 1. MySQL 复制表 如果我们需要完全的复制MySQL的数据表,包括表的结构,索引,默认值等. 如果仅仅使用CREATE TA ...
- 对python变量的理解
#!/usr/bin/python class Person: '''some words content or descriptions!''' name='luomingchuan' _age = ...
- 迭代Iterator的用法
迭代→遍历: 一个标准化遍历各类容器里面的所有对象的方法类(典型的设计模式) 把访问逻辑从不同类型的集合类中抽象出来,从而避免向客户端暴露集合的内部结构 迭代(Iterator)与枚举(Enumera ...
- MongoDB在MacOS上的客户端Robo 3T 的简单使用(二)
最近写了一个用node来操作MongoDB完成增.删.改.查.排序.分页功能的示例,并且已经放在了服务器上地址:http://39.105.32.180:3333. 本篇文章只做简单介绍,能够使用起来 ...
- Ubuntu16.04下沙盒数据导入到 Neo4j 数据库(图文详解)
不多说,直接上干货! 参考博客 http://blog.csdn.net/u012318074/article/details/72793914 (表示感谢) 前期博客 Neo4j沙盒实验申请过 ...
- java实现sql批量插入参数
背景: 需要更新一些不规范的时间格式,如将某个时间格式化为yy-MM-dd,实际上为 yy-MM-dd hh:mm:ss,并且需要提供回滚脚本. 例如:规范化时间的脚本如下: ,) WHERE tes ...
- vc6中关于“新建”
1.windows api 编程:新建→工程→Win32 Application→一个空工程→新建→文件→C++ Source File2.windows mfc 编程:新建→工程→MFC AppWi ...