JavaScriptで要素の座標を取得する方法/getBoundingClientRectメソッドの使い方

globe IT

getBoundingClientRectは、HTMLエレメント(要素)の位置座標を取得することができるメソッドです。

「ある程度までスクロールすると表示されるアレ」を、プレーンなJavaScriptとHTML/CSSで実装してみました。なぜかスマホだとうまく動かないですが、説明用なのでOK!

Advertisements

getBoundingClientRectの使い方

最初に要素を取得する必要があります。まず説明用にonclickを使って、要素をクリックするたびに処理が行われるようにします。

<!-- html -->
<div id = "rect" onclick = "rectTest();"
style = "width:600px; border:1px solid black;"></div>

//JavaScript
function rectTest(){
let position = document.getElementById("rect");
}

これでdivをクリックするたびに、関数「rectTest」が実行されるようになりました。では、座標を取得してみたいと思います。

要素の座標を取得
要素.getBoundingClientRect

取得した座標は一度変数に代入し、代入した変数からプロパティ「left」および「top」で具体的な値を引き出します。

画面の左端から見た要素の左端までの距離
座標.top

画面の上端から見た要素の上端までの距離
座標.top

実際にこれを仕込んで、出力するようにしてみました。

//JavaScript
var xy = position.getBoundingClientRect();
var x = xy.left ;
var y = xy.top ;
position.innerHTML = "xは" + x + "です。yは" + y + "です。";
座標を出力する

上の要素をクリックすると座標が表示されます。これが何かというと、「要素の左上が画面の左上にくっついた場所」を0,0として、左からどれぐらい右にいったか、上からどれぐらい下に離れているかを意味しています。下に離れている=要素が下に移動しているので、要素が上に移動する=画面を下にスクロールするにつれて数字が少なくなります。
画面をスクロールして再度マウスを乗せるとy軸の数値が変わりますし、ブラウザのサイズを変えるとdivの位置も調整されるので、x軸も変わります。

スクロール時に座標を取得

このgetBoundingClientRectを、スクロールした時に自動的に実行するようにしてみます。
スクロールした時に処理を実行するには、オブジェクトをwindowにし、addEventListenerでイベントの種類を「scroll」に設定します。

スクロール時に関数を実行
window.addEventListener(“scroll”,実行する関数,オプション);
※オプションは省略可能
※windowも省略可能

色々と省略して、次のようなものを作りました。座標を出力する場所は変えたいので、関数rectTest2でちがうdivを指定することにします。ただし、取得する座標はさっきのクリックして表示するdivのものです。

addEventListener("scroll",rectTest2);
座標を出力する

スクロールすると自動的に座標が取得されるようになりました。そして、要素が画面外にある場合にも、x/y座標が取得され続けることがわかりました。
このy軸をif文の条件に使えば、スクロールした時に特定の動作をさせることができそうです。

座標によって処理を変える

画面に表示された時のy軸の座標は、実際のところ端末やブラウザの状態に左右されます。ある程度メディアクエリを使用して書き分けるのが理想的かもしれませんが、ひとまずここではy=400以下になった場合に処理をすることにします。

if(y <= 400){
position.classList.remove("toHide");
position.classList.add("toShow");
}

hideクラスには、CSSのopacityで「透明にする」という設定をしています。これを排除することで、不透明になりながら表示する処理を与えることができます。

JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント