困っている方必見！offsetTopで高さが取得できない時の対処法

cssにてpositionを使っているときに、topやleftなどを％で指定していると、使っている機種によって％の値が変わってきます。

これは厄介。。。

こんな時に役立つのが、Javascriptを使ってページトップからの高さを取得してしまえば、機種によって%の値を変える必要はありません！

結論から言うと、getBoundingClientRect()、pageYOffsetの２つの関数を使います。

それでは使い方を見ていきましょう！！

※注意 要素の高さは普通offsetTopで取得できます。ただ、親要素にposition:relativeが設定してあると取得できない場合があるので、今回はそのやり方でやっていきます。

要素を取得

index.js

const topToElement = document.getElementsByClassName('class-name')[0]

また、document.getElementIdなどで取得してください

ページトップからの高さを取得

index.js

const topToElement = document.getElementsByClassName('class-name')[0]
const topToElementHeight = topToElement.getBoundingClientRect().top + window.pageYOffset
console.log(topToElementHeight)

このようにして高さを取得することができます！

また、これらはVue.jsで使う場合、DOM要素と紐づけられた後のmountedで行ってください。

createdでは取得できないのでご了承ください。

以上、「ページトップからある要素までの高さの取得方法」でした！

良かったら、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading