本次说明仅在chrom环境下,ie等其他浏览器可能不同

1获取显示屏高度(pc和移动端,屏幕分辨率px)

window.screen.height => 这个好理解,不多说。

2获取浏览器可视窗口高度(PC端)

document.documentElement.clientHeight => 就是网页在浏览器中可见高度,不包括浏览器自身的状态栏,随着浏览器大小变化;

3获取网页内容高度

1)document.documentElement.scrollHeightdocument.documentElement.offsetHeight => 就是整个网页文档body的高度,随着网页内容的多少变化,包括网页内的所有border,margin,padding;

2)body.clientHeight = body.offsetHeight => body的内容高度,不包括marginborder值,实际上就是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等区别的更多相关文章

  1. document.body、document.documentElement和window获取视窗大小的区别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...

  2. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  3. 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

    测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  5. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

    IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.do ...

  6. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  7. document.documentElement.clientHeight||document.documentElement.scrollHeight

    在我看<JavaScript高级程序设计>(第三版)的时候,在clientHeight和scrollHeight那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...

  8. document.documentElement.clientHeight和document.body.clientHeight区别

    首先了解下document HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档节点. 所有的HTML元素都是元 ...

  9. document.body.clientHeight和 document.documentElement.clientHeight 的区别

    1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...

随机推荐

  1. springMVC入门截图

    mvc在bs系统下的应用 ---------------------------------------------------- 在web.xml中配置前端控制器(系统提供的一个servlet类   ...

  2. poj--3678--Katu Puzzle(2-sat 建模)

    Katu Puzzle Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submit S ...

  3. java 中的静态(static)代码块

    类字面常量 final 静态域不会触发类的初始化操作 非 final static 静态域(以及构造器其实是一种隐式的静态方法) Class.forName():会自动的初始化: 使用 .class来 ...

  4. DB-MySQL:MySQL 复制表

    ylbtech-DB-MySQL:MySQL  复制表 1.返回顶部 1. MySQL 复制表 如果我们需要完全的复制MySQL的数据表,包括表的结构,索引,默认值等. 如果仅仅使用CREATE TA ...

  5. 对python变量的理解

    #!/usr/bin/python class Person: '''some words content or descriptions!''' name='luomingchuan' _age = ...

  6. 迭代Iterator的用法

    迭代→遍历: 一个标准化遍历各类容器里面的所有对象的方法类(典型的设计模式) 把访问逻辑从不同类型的集合类中抽象出来,从而避免向客户端暴露集合的内部结构 迭代(Iterator)与枚举(Enumera ...

  7. MongoDB在MacOS上的客户端Robo 3T 的简单使用(二)

    最近写了一个用node来操作MongoDB完成增.删.改.查.排序.分页功能的示例,并且已经放在了服务器上地址:http://39.105.32.180:3333. 本篇文章只做简单介绍,能够使用起来 ...

  8. Ubuntu16.04下沙盒数据导入到 Neo4j 数据库(图文详解)

    不多说,直接上干货! 参考博客 http://blog.csdn.net/u012318074/article/details/72793914   (表示感谢)  前期博客 Neo4j沙盒实验申请过 ...

  9. java实现sql批量插入参数

    背景: 需要更新一些不规范的时间格式,如将某个时间格式化为yy-MM-dd,实际上为 yy-MM-dd hh:mm:ss,并且需要提供回滚脚本. 例如:规范化时间的脚本如下: ,) WHERE tes ...

  10. vc6中关于“新建”

    1.windows api 编程:新建→工程→Win32 Application→一个空工程→新建→文件→C++ Source File2.windows mfc 编程:新建→工程→MFC AppWi ...