本次说明仅在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. C#中的CollectionBase用法

    ColectionBase中有List方法,返回的是类本身 class A :CollectionBase { public void add(B b) { List.Add(b); } public ...

  2. android优化 清除无效代码 UCDetector

    android下优化 清除无效 未被使用的 代码 UCDetector 官方下载地址:http://www.ucdetector.org/index.html UCDetector  是 eclips ...

  3. Rose2003执行出现 -2147417848 (80010108)&#39;:Automation 错误

    上篇博客在结尾的时候.我提到了Ration Rose2003执行出现"-2147417848 (80010108)':Automation错误"的问题.今天这篇博客就来介绍一下怎样 ...

  4. Cocos2d-x 3.0 红孩儿私家必修 - 第一章 初识Cocos2d-x 3.0project

    第一章    初识Cocos2d-x 3.0project Cocos2d-x 3.0出来了,听说与之前版本号相比修改较大 做为一个游戏开发人员.我们应该欢迎Cocos2d-x持续的更新和强大,Coc ...

  5. 使用记事本开发第一个java程序

    记事本是开发java程序最基础的一个工具 第一步:编写 新建一个文件名为Hello的文本文档,并将文件扩展名改为.java. 在文本框内输入我们的程序代码 ——————————————我是分割线——— ...

  6. 关于vue 自定义组件的写法与用法

    最近在网上看到很多大神都有写博客的习惯,坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴!当然本人能力实在有限写出的文章 ...

  7. Visual Studio2013下Magick++配置方法

    声明:本文系作者原创,如需转载请保持文章完整并注明出处(http://blog.csdn.net/u010281174/article/details/52224829). ImageMagick是一 ...

  8. [Tomcat]Tomcat6和Tomcat7的区别

    Tomcat 7最大的改进是对Servlet 3.0和Java EE 6的支持.◆Tomcat 7完全支持Servlet 3.0规范◆Tomcat 7新增了对Java注释的支持◆Tomcat 7通过w ...

  9. [转]Linux+XAMPP+eolinker开源版v3.2.4

    eolinker是一个由国人开源的接口管理系统(AMS),特性及介绍详见开源中国-eolinker首页. 搭建步骤参考:eolinker开源指南 系统环境:CentOS Linux release 7 ...

  10. js 转化为几天前,几小时前,几分钟前...

    转换标准时间为时间戳: function getDateTimeStamp(dateStr){ return Date.parse(dateStr.replace(/-/gi,"/" ...