getBoundingClientRect()メソッド

2372 ワード
client
要素の位置情報を取得することしか知らなかったが、今日は機能をテストしたが、そんなに簡単ではないことが分かった.例を参照してください.
<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    

    <style type="text/css">

        #null {

			height:1300px;

		

		}

		#bottom {

			background:lightblue;

			height:100px;

		}

    </style>

   

</head>

<body>

	<div id='null'> </div>

	<div id="bottom">

		 

	</div>

</body>



<script type="text/javascript">

	window.onload = function(){

		var bottom = document.getElementById('bottom');

		p(' y : ' + get(bottom, 'top'));

	}

	function get(el, name){

		var box = el.getBoundingClientRect(), 

			html = document.documentElement, 

			body = document.body, 

			scrollTop = html.scrollTop || body.scrollTop, 

			scrollLeft = html.scrollLeft || body.scrollLeft, 

			clientTop = html.clientTop || body.clientTop || 0, 

			clientLeft = html.clientLeft || body.clientLeft || 0, 

			top = box.top + scrollTop - clientTop, 

			left = box.left + scrollLeft - clientLeft;

		p('top: ' + box.top)

		p('scrollTop: ' + scrollTop)

		p('clientTop:' + clientTop)

		return name === 'top' ? top : left;

	}

	function p(s){

		console.log(s)

	}

</script>

</html>

　　
バーが一番上にある場合、スクロールバーを引いたことがない場合は、次のように印刷します.
top: 1308
scrollTop: 0
clientTop:0
要素y座標:1308
スクロールバーが中央にある場合は、次のように印刷します.
top: 831
scrollTop: 477
clientTop:0
要素y座標:1308
スクロールバーが一番下にある場合は、次のように印刷します.
top: 298
scrollTop: 1010
clientTop:0
要素y座標:1308
topとscrollTopの値が異なることがわかります
スクロールバーを引っ張ったことがない場合、要素はまだ一番下にあり、top値は大きいです.
スクロールバーを引っ張ると、要素が徐々に近づき、top値が減少し、scrollTop値が増加します.
まとめ:getBoundingClientRect().topは、ドキュメントのビジュアル領域の上部までの要素の距離を取得するために使用され、他の値は同じです.
しかし、この方法は完璧ではありません.少なくとも以下のバグがあります.
　　Handling table border offsets.
　　Fixed positioned elements.
　　Scroll offsets within another element.
　　Borders of overflowed parent elements.
絶対位置の要素は計算エラーになります.
 
http://ejohn.org/blog/getboundingclientrect-is-awesome/
TIユニットテスト
HDOJ 1047