要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?

スクロールして、現れた要素をアニメーションさせる方法をいろいろ勉強したので、理解したことを書いておこうと思います。

getBoundingClientRect

getBoundingClientRect().top

getBoundingClientRect().topはターゲットの位置を ブラウザの表示領域の左上を基点として、そこからの相対位置が示されます。 すぐ下に表示されている数字は、この要素のgetBoundingClientRect.topの値が示されています。 要素が画面上部にきたら数値は0になります。

scroll 要素の高さ取得 javascript document.addEventListener("scroll", function(){
const target = document.querySelector("要素のクラス名");
const getTargetDistace = target.getBoundingClientRect().top;
document.querySelector("要素のクラス名").textContent = getTargetDistace;
}

getBoundingClientRect().bottom

getBoundingClientRect().bottomは画面の下の端から要素の下の部分までの高さをを示します。

scroll 要素の高さ取得

window.innerHeight

window.innerHeightは現在の画面の高さを取得します。 すぐ下に表示されている数字は、今お使いのブラウザの高さの値が示されています。

Javascriptで、console.log(window.innerHeight)と記述すれば、お使いのブラウザの画面の高さを知ることができます。

scroll 要素の高さ取得

window.pageYOffset と document.documentElement.scrollTop

ブラウザの上端を基準とした縦方向のページのスクロール量を取得します。 この2つはどちらも同じ値です。 すぐ下に表示されている数字は、スクロールされた値が示されています。

javascript document.addEventListener("scroll", function(){
console.log(window.pageYOffset);
}

まとめ

要素の高さを取得する方法について解説しました。最初は混乱するかもしれません。理解できれば、要素が画面に現れた時にアニメーションを付けることができ、ホームページがグッと魅力的になります。

scroll 要素の高さ取得

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<