(转)获取页面可视区域

一、有文档头（docType）声明的情况

           1、IE系列

              （1）、IE8.0

                   client家族（clientWidth / clientHeight）：是以documentElement中计算的内容为准，其不包括滚动条的高度和宽度。

                   offset家族（offsetWidth / offsetHeight）：是以documentElement中计算的内容为准。

                   scroll家族（scrollTop / scrollLeft）：是以documentElement中计算的内容为准；body计算结果为0。

              （2）、IE7.0

                   client家族（clientWidth / clientHeight）：是以documentElement中计算的内容为准，其不包括滚动条的高度和宽度（与IE8.0相同）。

                   offset家族（offsetWidth / offsetHeight）：是以documentElement中计算的内容为准（与IE8.0相同）。

                   scroll家族（scrollTop / scrollLeft）：是以documentElement中计算的内容为准；body计算结果为0（与IE8.0相同）。

              （3）、IE6.0

                   client家族（clientWidth / clientHeight）：是以body中计算的内容为准，其不包括滚动条的高度和宽度；documentElement计算结果为0。

                   offset家族（offsetWidth / offsetHeight）：body与documentElement的计算结果相同。

                   scroll家族（scrollTop / scrollLeft）：是以body中计算的内容为准，其不包括滚动条的高度和宽度；documentElement计算结果为0。

           2、标准浏览器系列

                   client家族（clientWidth / clientHeight）：window.innerWidth(innerHeight)是包括滚动条的；而documentElement中计算的内容不包括滚动条的高度和宽度。

                   offset家族（offsetWidth / offsetHeight）：是以documentElement中计算的内容为准。

                   scroll家族（scrollTop / scrollLeft）：window.pageYOffset == document.documentElement.scrollTop同时window.pageXOffset == document.documentElement.scrollLeft

           总结：

                 1、IE浏览器系列

                     获取client家族相关数值：document.documentElement.clientWidth(clientHeight) || document.body.clientWidth(clientHeight);

                     获取offset家族相关数值：document.documentElement.offsetWidth(offsetHeight);

                     获取scroll家族相关数值：document.documentElement.scrollTop(scrollLeft) || document.body.scrollTop(scrollLeft);

                 2、标准浏览器系列

                     获取client家族相关数值：window.innerWidth(innerHeight)

                     获取offset家族相关数值：document.documentElement.offsetWidth(offsetHeight);

                     获取scroll家族相关数值：window.pageXOffset(pageYOffset)

	IE系列浏览器
client家族：	document.documentElement.clientWidth(clientHeight) || document.body.clientWidth(clientHeight);
offset家族：	document.documentElement.offsetWidth(offsetHeight);
scroll家族：	document.documentElement.scrollTop(scrollLeft) || document.body.scrollTop(scrollLeft);
	标准浏览器
client家族：	window.innerWidth(innerHeight)
offset家族：	document.documentElement.offsetWidth(offsetHeight);
scroll家族：	window.pageXOffset(pageYOffset)

 

     二、没有文档头（docType）声明的情况

           1、IE系列

              （1）、IE8.0

                   client家族（clientWidth / clientHeight）：是以documentElement中计算的内容为准，其不包括滚动条的高度和宽度。

                   offset家族（offsetWidth / offsetHeight）：是以documentElement中计算的内容为准。

                   scroll家族（scrollTop / scrollLeft）：是以documentElement中计算的内容为准；body计算结果为0。

              （2）、IE7.0

                   client家族（clientWidth / clientHeight）：是以documentElement中计算的内容为准，其不包括滚动条的高度和宽度（与IE8.0相同）。

                   offset家族（offsetWidth / offsetHeight）：是以documentElement中计算的内容为准（与IE8.0相同）。

                   scroll家族（scrollTop / scrollLeft）：是以documentElement中计算的内容为准；body计算结果为0（与IE8.0相同）。

              （3）、IE6.0

                   client家族（clientWidth / clientHeight）：是以body中计算的内容为准，其不包括滚动条的高度和宽度；documentElement计算结果为0。

                   offset家族（offsetWidth / offsetHeight）：body与documentElement的计算结果相同。

                   scroll家族（scrollTop / scrollLeft）：是以body中计算的内容为准，其不包括滚动条的高度和宽度；documentElement计算结果为0。

           2、标准浏览器系列

                   client家族（clientWidth / clientHeight）：window.innerWidth(innerHeight)

                   offset家族（offsetWidth / offsetHeight）：

                        ★Chrome与Safari：是以documentElement中计算的内容为准。

                        ★FF：以documentElement中计算结果内准。

                        ★Opera：以bocy中计算结果为准。

                   scroll家族（scrollTop / scrollLeft）：window.pageYOffset == document.body.scrollTop同时window.pageXOffset == document.body.scrollLeft

           总结：

                 1、IE浏览器系列

                     获取client家族相关数值：document.documentElement.clientWidth(clientHeight) || document.body.clientWidth(clientHeight);

                     获取offset家族相关数值：document.documentElement.offsetWidth(offsetHeight);

                     获取scroll家族相关数值：document.documentElement.scrollTop(scrollLeft) || document.body.scrollTop(scrollLeft);

                 2、标准浏览器系列

                     获取client家族相关数值：window.innerWidth(innerHeight)

                     获取offset家族相关数值：document.documentElement与document.body取最大值（此数据有些不太确定）

                     获取scroll家族相关数值：window.pageXOffset(pageYOffset)

	IE系列浏览器
client家族：	document.documentElement.clientWidth(clientHeight) || document.body.clientWidth(clientHeight);
offset家族：	document.documentElement.offsetWidth(offsetHeight);
scroll家族：	document.documentElement.scrollTop(scrollLeft) || document.body.scrollTop(scrollLeft);
	标准浏览器
client家族：	window.innerWidth(innerHeight)
offset家族：	document.documentElement与document.body取最大值（此数据有些不太确定）
scroll家族：	window.pageXOffset(pageYOffset)