JavaScript がドキュメント座標とビューポート座標を取得する_JavaScript スキル

要素の位置はピクセル単位で測定され、X 座標は右に行くほど増加し、Y 座標は下に行くほど増加します。ただし、座標系の原点として 2 つの異なる点があります。要素は、ドキュメントの左上隅に相対的に配置することも、ドキュメントが表示されているビューポートの左上隅に相対的に配置することもできます。

評価されたウィンドウとタブでは、「ビューポート」はドキュメントのコンテンツを実際に表示するブラウザの一部のみであり、ブラウザの「シェル」（メニュー、ツールバー、タブなど）は含まれません。

フレーム内に表示されるドキュメントには、フレームページのd5ba1642137c3f32f4f4493ae923989c要素を指定します。いずれの場合も、要素の位置について議論するときは、使用される座標がドキュメント座標であるかビューポート座標であるかを明確にすることが重要です。 (ビューポート座標はウィンドウ座標とも呼ばれることに注意してください)

ドキュメントがビューポートより小さい場合、またはスクロールがまだ発生していない場合、ドキュメントの左上隅はビューポートの左上隅であり、ドキュメントとビューポートの座標系は同じです。ただし、一般的に、2 つの座標系間で変換するには、スクロール オフセットを加算または減算する必要があります。たとえば、要素の Y 座標がドキュメント座標で 200 ピクセルで、ユーザーがブラウザを 75 ピクセル下にスクロールした場合、ビューポート座標での要素の Y 座標は 125 ピクセルになります。同様に、要素の X 座標がビューポート座標で 400 ピクセルで、ユーザーがビューポートを水平に 200 ピクセルスクロールした場合、ドキュメント座標での要素の X 座標は 600 ピクセルになります。

ドキュメントの座標はビューポートの座標よりも基本的なもので、ユーザーがスクロールしても変化しません。ただし、クライアント側プログラミングではビューポート座標を使用するのが非常に一般的です。ドキュメント座標は、CSS を使用して要素の位置を指定するときに使用されます。ただし、要素の位置をクエリする最も簡単な方法は、 getBoundingClientRect() でビューポート座標の位置を返します。同様に、マウス イベントのイベント ハンドラー関数を登録すると、報告されるマウス ポインターの座標はビューポート座標系になります。

座標系で変換するには、ブラウザ ウィンドウのスクロール バーの位置を決定する必要があります。 Window オブジェクトの pageXoffset プロパティと pageYOffset プロパティは、IE8 以前を除くすべてのブラウザでこれらの値を提供します。 IE (および最新のすべてのブラウザ) は、scrollLeft プロパティとscrollTop プロパティを通じてスクロールバーの位置を取得することもできます。混乱するのは、通常、これらのプロパティはドキュメントのルート ノード (document.documentElement) を検索することによって取得されますが、奇妙なモードではドキュメントの 6c04bd5ca3fcae76e30b72ad730ca86d 要素 (document.body) でクエリを実行する必要があることです。以下に、スクロールバーの位置を簡単に問い合わせる方法を示します。

functon getScrollOffsets(w){
  w = w || window;
  var sLeft,sTop;
  if(w.pageXOffset != null) {
    sLeft = w.pageXOffset;
    sTop = w.pageYOffset;
    return {x:sLeft,y:sTop};
  }
  if(document.compatMode == "CSS1Compat"){
    sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; 
    sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;  
    return {x:sLeft,y:sTop};
  }else if(document.compatMode == "BackCompat"){
    sLeft = document.body.scrollLeft; 
    sTop = document.body.scrollTop;
    return {x:sLeft,y:sTop};  
  }
}

ドキュメントのどの部分が現在表示されているかを判断する場合など、ビューポートのサイズを判断できると便利な場合があります。スクロール オフセットを使用してビューポートの寸法をクエリする単純な方法は、IE8 以前では機能しません。この手法が IE で機能するかどうかは、ブラウザーが特殊モードか標準モードかによって異なります。

ウィンドウの下の属性:

innerHeight: スクロールバーを含むウィンドウコンテンツ部分の高さ

innerWidth: スクロールバーを含むウィンドウコンテンツ部分の幅

outerHeight: インターフェイスのすべてのコンポーネントを含むブラウザ全体の高さ。

outerWidth: インターフェイスのすべてのコンポーネントを含むブラウザ全体の幅。

pageXOffset: ブラウザ ウィンドウのスクロール バーの X 軸の位置

pageYOffset: ブラウザ ウィンドウのスクロール バーの Y 軸の位置

scrollX: ブラウザウィンドウのスクロールバーの X 軸の位置

scrollY: ブラウザウィンドウのスクロールバーのY軸の位置

プロパティ

document.documentElement document.body
clientHeight スクロール部分とスクロール バーを除いた、ビューポートに表示されるコンテンツのサイズ。
clientWidth
clientLeft
clientTop
offsetHeight スクロール バーを含むコンテンツ サイズ。
オフセット幅
オフセット左
offsetTop
scrollHeight スクロールするコンテンツのサイズ。スクロール部分は含みますが、スクロール バーは含まれません。
スクロール幅
スクロールトップ
スクロール幅

クエリ ウィンドウのビューポート サイズ:

function getViewportSize(w){
　　w = w || window;
　　var cWidth,cHeight;
　　if(w.innerWidth != null){
　　　　cWidth = w.innerWidht;
　　　　cHeight = w.innerHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}
　　if(document.compatMode == "CSS1Compat"){
　　　　cWidth = document.documentElement.clientWidth;
　　　　cHeight = doument.documentElement.clientHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}else if(document.compatMode == "BackCompat"){
　　　　cWidth = document.body.clientWidth;
　　　　cHeight = doument.body.clientHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}
}

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。