【JS】要素に対するスクロール量などいろいろな値の取得

タイトルの通りですが、要素に対してスクロールイベントを追加する時など、スクロール量等々値を取得します。

その都度取得方法を検索するのですが欲しい情報を自分が使いやすいように記述してまとめました。

jQueryではinvew.js等のライブラリもありますが、jQueryが使えないときもあるかと思いますので、今回は素のJSのみで記述しています。

まずは取得する関数のみを以下に記載します。

'use strict';
const buffer = 100;
/**
 * ある要素(target)に対するいろいろな値を取得
 * @param {Element} target
 */
const getPosition = (target) => {
    const h  = document.body.scrollHeight;// bodyの高さ
    const wh = window.innerHeight;        // windowの高さ >> a

    // Element.getBoundingClientRect() についての説明はMDN
    // https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect
    const t = target.getBoundingClientRect().top;
    const r = target.getBoundingClientRect().right;
    const b = target.getBoundingClientRect().bottom;
    const l = target.getBoundingClientRect().left;
    
    const x = window.scrollX;// スクロール量(X方向)
    const y = window.scrollY;// スクロール量(Y方向) >> b

    const ty = target.getBoundingClientRect().top + window.scrollY;// ページtopからtargetまでの距離 >> c

    const scrollIn = ty - (wh + y);// targetがscroll inするまで距離 >> d = c - (a + b)
    const scrollInAddBuffer = ty - (wh + y) + buffer;// scrollInにbuffer分の余裕をもたせたときの距離
}

 

以下はいろいろな値を取得して値を表示するサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>いろいろな値の取得</title>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        position: relative;
        height: 250vh;
    }
    #target {
        position: absolute;
        top: 110vh;
        left: 5vw;
        width: 10vh;
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        background-color: #333;
        color: #fff;
    }
    #result {
        position: fixed;
        top: 3vh;
        right: 3vh;
        padding: 30px;
        width: max-content;
        border: 3px solid rgb(214, 224, 15);
        background-color: #fff;
    }
    #result ul li span {
        font-weight: 700;
    }
</style>
</head>
<body>
<div id="result">
    <ul>
        <li><code>body</code>の高さ: <span id="h"></span></li>
        <li><code>window</code>の高さ: <span id="wh"></span></li>
        <li style="margin-top: 10px;">top: <span id="top"></span></li>
        <li>right: <span id="right"></span></li>
        <li>bottom: <span id="bottom"></span></li>
        <li>left: <span id="left"></span></li>
        <li style="margin-top: 10px;">スクロール量(X方向): <span id="x"></span></li>
        <li>スクロール量(Y方向): <span id="y"></span></li>
        <li style="margin-top: 10px;">ページtopから<code>target</code>までの距離: <span id="ty"></span></li>
        <li><code>target</code>がscroll inするまで距離: <span id="scrollIn"></span></li>
        <li>scroll inにbuffer(<span id="buffer"></span>)分の余裕をもたせたときの距離: <span id="scrollInAddBuffer"></span></li>
    </ul>
</div>

<div id="target">target</div>

<script>
const target = document.querySelector('#target');
const buffer = 100;
    
// ある要素(target)に対するいろいろな値を取得
const getPosition = (target) => {
    const h  = document.body.scrollHeight;// bodyの高さ
    const wh = window.innerHeight;        // windowの高さ >> a

    // Element.getBoundingClientRect() についての説明はMDN
    // https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect
    const t = target.getBoundingClientRect().top;
    const r = target.getBoundingClientRect().right;
    const b = target.getBoundingClientRect().bottom;
    const l = target.getBoundingClientRect().left;
    
    const x = window.scrollX;// スクロール量(X方向)
    const y = window.scrollY;// スクロール量(Y方向) >> b

    const ty = target.getBoundingClientRect().top + window.scrollY;// ページtopからtargetまでの距離 >> c

    const scrollIn = ty - (wh + y);// targetがscroll inするまで距離 >> d = c - (a + b)
    const scrollInAddBuffer = ty - (wh + y) + buffer;// scrollInにbuffer分の余裕をもたせたときの距離

    document.querySelector('#h').innerHTML        = h + 'px';
    document.querySelector('#wh').innerHTML       = wh + 'px';
    document.querySelector('#top').innerHTML      = t + 'px';
    document.querySelector('#right').innerHTML    = r + 'px';
    document.querySelector('#bottom').innerHTML   = b + 'px';
    document.querySelector('#left').innerHTML     = l + 'px';
    document.querySelector('#x').innerHTML        = x + 'px';
    document.querySelector('#y').innerHTML        = y + 'px';
    document.querySelector('#ty').innerHTML       = ty + 'px';
    document.querySelector('#scrollIn').innerHTML = scrollIn + 'px';
    document.querySelector('#scrollInAddBuffer').innerHTML = scrollInAddBuffer + 'px';
    document.querySelector('#buffer').innerHTML = buffer + 'px';
}

document.addEventListener('DOMContentLoaded', getPosition(target))
window.addEventListener('scroll', ()=>{
    getPosition(target)
})
window.addEventListener('resize', ()=>{
    getPosition(target)
})
</script>
</body>
</html>

上記サンプルをhtmlファイルにまるごとコピペして試してみて下さい。

Recent Posts

Recent Column