みかづきブログ・カスタム

基本的にはちょちょいのほいです。

jQueryを使わずにoffset().topを実装する 📄

f:id:kimizuka:20201214195745p:plain

ページの上部を起点としたときのDOMのY座標を知りたいとき、jQueryを使うのであれば、

const targetTop = $('#target').offset().top;

と書けますが、それだけのためにjQueryを導入するのは勿体ない気がしてしまいます。

そんなときは、

const targetTop = document.getElementById('target').getBoundingClientRect().top + window.pageYOffset;

と書けば、jQueryなしで取得できます。
getBoundingClientRect().topで画面上部からの高さを取得、pageYOffsetでスクロール量を取得できますので、2つの値の合算で「ページの上部を起点としたときのDOMのY座標」を計算できるのです。

かつては、

const targetTop = document.getElementById('target').getBoundingClientRect().top + window.scrollY || window.pageYOffset;

という感じで、スクロール量の算出にwindow.scrollYを使い、window.scrollYがないブラウザ(IE)ではwindow.pageYOffsetを使うという実装をしていたのですが、そもそもwindow.pageYOffsetが、全てのブラウザで使えるということを最近知ったので、window.pageYOffsetのみ使うようにしました。

developer.mozilla.org
developer.mozilla.org