浏览器渲染方式判断,并兼容获取网页宽度和滚动条

Posted 贾广飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器渲染方式判断,并兼容获取网页宽度和滚动条相关的知识,希望对你有一定的参考价值。


document.compatMode用来判断当前浏览器采用的渲染方式。
BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。

当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。


兼容获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

if (document.compatMode == \"BackCompat\") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == \"CSS1Compat\"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;

}

以上是关于浏览器渲染方式判断,并兼容获取网页宽度和滚动条的主要内容,如果未能解决你的问题,请参考以下文章

如何能快速知道当前网页滚动条的高度?有工具吗?

JavaScript—— scroolleft----offsetleft 系列的含义以及浏览器兼容问题

JQuery实战运用:判断网页是否已经滚动到浏览器底部了

前端(浏览器兼容性Ie与chrome)之滚动条的隐藏

JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

js获取浏览器宽度高度(整理)