940 views

この記事は最終更新から 1431日 が経過しています。

1. やりたいこと

任意の要素について、
ページ先頭から、要素上端までの距離[px]を知りたい。
同時に、
ページ先頭から、要素下端までの距離[px]を知りたい。

2. やってみる

以下の 3段階で求める必要があるのだそうな。

Step 1 : ページ上端から画面上端までの距離[px]を知る。

これは window.pageYOffset を参照すればよい。
スクロールしていなければ、この値は 0だ。
スクロールしていれば、この値はスクロール量になっている。

Step 2 : 画面上端から要素上端までの距離[px]を知る。

これは 要素.getBoundingClientRect().top を参照すればよい。

Step 3 : 両者を足し算する。

関数にしてみた。

// ■ 指定要素の上端のページY座標を得る関数。
// ※elemは native objectであること。(JQueryは NG)
function get_elem_pagePosY_top( elem ){
  const pos = elem.getBoundingClientRect();   // 指定要素のviewport内の相対位置を取得
  return window.pageYOffset + pos.top;
}

ついでに、この値に要素の高さを足せば、ページ先頭から要素下端までの距離が求められる。

// ■ 指定要素の下端のページY座標を得る関数。
// ※elemは native objectであること。(JQueryは NG)
function get_elem_pagePosY_bottom( elem ){
  const pos = elem.getBoundingClientRect();   // 指定要素のviewport内の相対位置を取得
  return window.pageYOffset + pos.top + pos.height;
}

getBoundingClientRectについては、こちらのページで仕様を説明してくださっている。 m(_ _)m
Element.getBoundingClientRect()

※注意
因みに、JQueryで $(elem).height() とすると border, paddingを除いた内部領域の高さが取得できる。
上記関数中の height は border, paddingを含む値、JQueryで書くならば $(elem).outerHeight() に相当する値が取得できる。

図にまとめると、以下のようになる。

3. 応用

(1) 実用的な関数にする。

応用と言うほどではないが、TOPと BOTTOMを同時に知りたいケースも多いので、これに対応する。
戻り値を配列で返すだけだ。

// ■ 指定要素の上端・下端のページY座標を得る関数。
// ※elemは native objectであること。(JQueryは NG)
function get_elem_pagePosY( elem ){
  const pos = elem.getBoundingClientRect();   // 指定要素のviewport内の相対位置を取得
  const topY = window.pageYOffset + pos.top;  // 指定要素上端のページY座標を算出
  const btmY = topY + pos.height;             // 指定要素下端のページY座標を算出
  return [topY, btmY];                        // Call元に配列で返却する。
}

この関数はこんな風に使えばよい。

var [posYtop, posYbottom] = get_elem_pageY(elem);

因みに、$(‘#AAA’) など JQueryで作ったオブジェクトを渡す場合 $(‘#AAA’).get(0) でネイティブに戻してから渡すこと。

var [posYtop, posYbottom] = get_elem_pageY(elem.get(0));

---