如何获取页面可视区域-----getViewPort

Posted on 2010-06-08 13:19 瓜籽阅读(1057) 评论(2) 编辑收藏举报

最近在做项目时，接到策划通知需要支持iPhone手机的浏览。其中要计算浏览器当前可视区域的高度以及当前滚动的高度，就这个问题我从网上找了一些相关的资料并做了一些的总结。目前就iPhone手机来说，如果要计算当前滚动的高度时有些变态；当用户在触摸屏上进行页面拖动时，其scrollTop始终为0；而只有当用户拖动页面在看不到浏览器地址框以后再往下一点儿才开始计算真正的scrollTop的数值。就因为他的这个问题，我被开发和策划折磨了好久，郁闷……

以下就是我对获取当前页面中可视区域的尺寸（clientWidth / clientHeight）以及相对尺寸（offsetWidth / offsetHeight）和滚动尺寸（scrollTop / scrollLeft）做了一个小的总结。

这些数值都要受到文档头（docType）的影响，所以将他他分为以下两种情况：

一、有文档头（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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> new document </title> <style> body {font-size: 12px;} h3 {mangin: 0; padding: 0; color: green; line-height: 0px;} #info, #scrollInfo {line-height: 35px;} </style> </head> <body> <p>TEST</p> <p>TEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <div id="info"></div> <div id="scrollInfo"></div> <span id="preserve596e20f276894a8c97cd9af2ecf5c545" class="wlWriterPreserve"><script> window.onload = function(){ var docElement = document.documentElement; var docBody = document.body; var info = document.getElementById('info'); var scrollInfo = document.getElementById('scrollInfo'); info.innerHTML = '<h3>ClientHeight:</h3>' + 'documentElement clientHeight: <span style="color: red">' + docElement.clientHeight + '</span><br/>' + 'Body clientHeight: <span style="color: red">' + docBody.clientHeight + '</span><br/>' + '<h3>ClientWidth:</h3>' + 'documentElement clientWidth: <span style="color: red">' + docElement.clientWidth + '</span><br/>' + 'Body clientWidth: <span style="color: red">' + docBody.clientWidth + '</span><br/>' + '<h3>InnerHeight:</h3>' + 'window innerHeight: <span style="color: red">' + window.innerHeight + '</span><br/>' + 'self innerHeight: <span style="color: red">' + self.innerHeight + '</span><br/>' + '<h3>InnerWidth:</h3>' + 'window innerWidth: <span style="color: red">' + window.innerWidth + '</span><br/>' + 'self innerWidth: <span style="color: red">' + self.innerWidth + '</span><br/>' + '<h3>OffsetHeight:</h3>' + 'documentElement offsetHeight: <span style="color: red">' + docElement.offsetHeight + '</span><br/>' + 'Body offsetHeight: <span style="color: red">' + docBody.offsetHeight + '</span><br/>' + '<h3>OffsetWidth:</h3>' + 'documentElement offsetWidth: <span style="color: red">' + docElement.offsetWidth + '</span><br/>' + 'Body offsetWidth: <span style="color: red">' + docBody.offsetWidth + '</span>'; window.onscroll = function(){ scrollInfo.innerHTML = '<div>-----------------------------------</div>' + '<h3>ScrollTop:</h3>' + 'documentElement scrollTop: <span style="color: red">' + docElement.scrollTop + '</span><br/>' + 'Body scrollTop: <span style="color: red">' + docBody.scrollTop + '</span><br/>' + 'documentElement scrollLeft: <span style="color: red">' + docElement.scrollLeft + '</span><br/>' + 'Body scrollLeft: <span style="color: red">' + docBody.scrollLeft + '</span><br/>' + '<h3>PageYOffset:</h3>' + 'window pageYOffset: <span style="color: red">' + window.pageYOffset + '</span><br/>' + 'self pageYOffset: <span style="color: red">' + self.pageYOffset + '</span>'; } } </script></span> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TEST</p> </body> </html>

二、没有文档头（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)

<html> 	<head> 	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 	  <title> new document </title> 	  <style> 		body {font-size: 12px;} 		h3 {mangin: 0; padding: 0; color: green; line-height: 0px;} 		#info, #scrollInfo {line-height: 35px;} 	  </style> 	   	</head> 	 	<body> 		<p>TEST</p> 		<p>TEST</p> 		<p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> 		<p>TEST</p> 		<div id="info"></div> 		<div id="scrollInfo"></div> 	  <span id="preserve52b79d77bbb84d4d88f728d82caee5ce" class="wlWriterPreserve"><script> 		  window.onload = function(){ 			var docElement = document.documentElement; 			var docBody = document.body; 			var info = document.getElementById('info'); 			var scrollInfo = document.getElementById('scrollInfo'); 			 			info.innerHTML = '<h3>ClientHeight:</h3>' 					+ 'documentElement clientHeight: <span style="color: red">' + docElement.clientHeight + '</span><br/>' 					+ 'Body clientHeight:  <span style="color: red">' + docBody.clientHeight + '</span><br/>' 					+ '<h3>ClientWidth:</h3>' 					+ 'documentElement clientWidth:  <span style="color: red">' + docElement.clientWidth + '</span><br/>' 					+ 'Body clientWidth:  <span style="color: red">' + docBody.clientWidth + '</span><br/>' 					+ '<h3>InnerHeight:</h3>' 					+ 'window innerHeight:  <span style="color: red">' + window.innerHeight + '</span><br/>' 					+ 'self innerHeight: <span style="color: red">' + self.innerHeight + '</span><br/>' 					+ '<h3>InnerWidth:</h3>' 					+ 'window innerWidth:  <span style="color: red">' + window.innerWidth + '</span><br/>' 					+ 'self innerWidth: <span style="color: red">' + self.innerWidth + '</span><br/>' 					+ '<h3>OffsetHeight:</h3>' 					+ 'documentElement offsetHeight: <span style="color: red">' + docElement.offsetHeight + '</span><br/>' 					+ 'Body offsetHeight: <span style="color: red">' + docBody.offsetHeight + '</span><br/>' 					+ '<h3>OffsetWidth:</h3>' 					+ 'documentElement offsetWidth: <span style="color: red">' + docElement.offsetWidth + '</span><br/>' 					+ 'Body offsetWidth: <span style="color: red">' + docBody.offsetWidth + '</span>'; 							 			window.onscroll = function(){ 				scrollInfo.innerHTML = '<div>-----------------------------------</div>' 					+ '<h3>ScrollTop:</h3>' 					+ 'documentElement scrollTop: <span style="color: red">' + docElement.scrollTop + '</span><br/>' 					+ 'Body scrollTop: <span style="color: red">' + docBody.scrollTop + '</span><br/>' 					+ 'documentElement scrollLeft: <span style="color: red">' + docElement.scrollLeft + '</span><br/>' 					+ 'Body scrollLeft: <span style="color: red">' + docBody.scrollLeft + '</span><br/>' 					+ '<h3>PageYOffset:</h3>' 					+ 'window pageYOffset:  <span style="color: red">' + window.pageYOffset + '</span><br/>' 					+ 'self pageYOffset:  <span style="color: red">' + self.pageYOffset + '</span>'; 									 			} 		  } 	  </script></span> 	  <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> 		<p>TEST</p> 		<p>TEST</p> 		<p>TEST</p> 		<p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> 		<p>TEST</p> 		<p>TEST</p> 		<p>TEST</p> 		<p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> 		<p>TEST</p> 		<p>TEST</p> 		<p>TEST</p> 		<p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> 		<p>TEST</p> 	</body> </html>

刷新页面返回顶部

瓜籽儿的Blog

公告

如何获取页面可视区域-----getViewPort