不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
2017-10-25 14:45
651 查看
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此。
两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
【文档类型已申明】
IE
document.documentElement.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度,
document.documentElement.clientHeight 浏览器可视部分高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 始终为0
document.body.clientHeight 浏览器所有内容高度
FF
document.documentElement.scrollHeight 浏览器所有内容高度 ,
document.documentElement.scrollTop 浏览器滚动部分高度,
document.documentElement.clientHeight 浏览器可视部分高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 始终为0
document.body.clientHeight 浏览器所有内容高度
Chrome
document.documentElement.scrollHeight 浏览器所有内容高度,
document.documentElement.scrollTop 始终为0,
document.documentElement.clientHeight 浏览器可视部分高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 浏览器滚动部分高度
document.body.clientHeight 浏览器所有内容高度
【文档类型未申明】
IE
document.documentElement.scrollHeight 浏览器可视部分高度,
document.documentElement.scrollTop 始终为0,
document.documentElement.clientHeight 始终为0,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 浏览器滚动部分高度
document.body.clientHeight 浏览器可视部分高度
FF
document.documentElement.scrollHeight 浏览器可视部分高度,
document.documentElement.scrollTop 始终为0,
document.documentElement.clientHeight 浏览器所有内容高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 浏览器滚动部分高度
document.body.clientHeight 浏览器可视部分高度
Chrome
document.documentElement.scrollHeight 浏览器可视部分高度,
document.documentElement.scrollTop 始终为0,
document.documentElement.clientHeight 浏览器所有内容高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 浏览器滚动部分高度
document.body.clientHeight 浏览器可视部分高度
浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和
浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
综上
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body
这里之前有误, document.compatMode 可以用来判断是否声明了DTD, 值为"BackCompat":未声明,值为"CSS1Compat":已声明。
下面就是如何判断滚动条是否滚动到页面最底部,也是写瀑布流的时候很关键的一部分代码。
document.compatMode用来判断当前浏览器采用的渲染方式。
BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况
两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
【文档类型已申明】
IE
document.documentElement.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度,
document.documentElement.clientHeight 浏览器可视部分高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 始终为0
document.body.clientHeight 浏览器所有内容高度
FF
document.documentElement.scrollHeight 浏览器所有内容高度 ,
document.documentElement.scrollTop 浏览器滚动部分高度,
document.documentElement.clientHeight 浏览器可视部分高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 始终为0
document.body.clientHeight 浏览器所有内容高度
Chrome
document.documentElement.scrollHeight 浏览器所有内容高度,
document.documentElement.scrollTop 始终为0,
document.documentElement.clientHeight 浏览器可视部分高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 浏览器滚动部分高度
document.body.clientHeight 浏览器所有内容高度
【文档类型未申明】
IE
document.documentElement.scrollHeight 浏览器可视部分高度,
document.documentElement.scrollTop 始终为0,
document.documentElement.clientHeight 始终为0,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 浏览器滚动部分高度
document.body.clientHeight 浏览器可视部分高度
FF
document.documentElement.scrollHeight 浏览器可视部分高度,
document.documentElement.scrollTop 始终为0,
document.documentElement.clientHeight 浏览器所有内容高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 浏览器滚动部分高度
document.body.clientHeight 浏览器可视部分高度
Chrome
document.documentElement.scrollHeight 浏览器可视部分高度,
document.documentElement.scrollTop 始终为0,
document.documentElement.clientHeight 浏览器所有内容高度,
document.body.scrollHeight 浏览器所有内容高度
document.body.scrollTop 浏览器滚动部分高度
document.body.clientHeight 浏览器可视部分高度
浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和
浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
综上
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body
这里之前有误, document.compatMode 可以用来判断是否声明了DTD, 值为"BackCompat":未声明,值为"CSS1Compat":已声明。
下面就是如何判断滚动条是否滚动到页面最底部,也是写瀑布流的时候很关键的一部分代码。
1 window.onscroll = function (){ 2 var marginBot = 0; 3 if (document.compatMode === "CSS1Compat"){ 4 marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)- document.documentElement.clientHeight; 5 } else { 6 marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight; 7 } 8 if(marginBot<=0) { 9 //do something 10 } 11 }
document.compatMode用来判断当前浏览器采用的渲染方式。
BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况
相关文章推荐
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
- document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- IE/FF/Chrome下document.documentElement/body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否到达页面底部。
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
- 获取scrollTop兼容各浏览器的方法,以及body和documentElement是啥?
- js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop
- 页面各元素位置和距离对象关系图解。 (深入document.documentElement、body.clentTop、div.scrollTop、div.scrollHeight、body.offsetWidth and so on)
- 获取scrollTop兼容各浏览器的方法,以及body和documentElement是啥?
- js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。
- 获取scrollTop兼容各浏览器的方法,以及body和documentElement是啥?
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- 模式浏览器火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题