▲TOPへ戻る

要素の高さを取得する方法。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さん

パソコン好きなガオ

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

サイト内検索👇