要素のスクロール位置を取得および設定する方法

概要：このチュートリアルでは、Element.scrollTop および Element.scrollLeft プロパティを使用して、要素のスクロール位置を取得または設定する方法を学習します。

要素のスクロール位置を取得または設定するには、次の手順に従います。

まず、querySelector() などの選択メソッドを使用して要素を選択します。
次に、scrollLeft および scrollTop プロパティを介して要素のスクロール位置にアクセスします。

Element.scrollTop は、要素のコンテンツが垂直方向にスクロールされたピクセル数を取得または設定します。

Element.scrollLeft は、要素のコンテンツが左端からスクロールされたピクセル数を取得または設定します。

要素の左上隅は (0, 0) であることに注意してください。 scrollLeft と scrollTop はその座標を基準としています。

次の例は、ID が #scrollDemo の要素のスクロール位置を取得する方法を示しています。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get/Set Scroll Position of an Element</title>
    <style>
        #scrollDemo {
            height: 200px;
            width: 200px;
            overflow: auto;
            background-color: #f0db4f
        }

        #scrollDemo p {
            /* show the scrollbar */
            height: 300px;
            width: 300px;
        }
    </style>
</head>

<body>
    <div id="scrollDemo">
        <p>JavaScript scrollLeft / scrollTop</p>
    </div>
    <div class="output"></div>
    <script>
        const scrollDemo = document.querySelector("#scrollDemo");
        const output = document.querySelector(".output");

        scrollDemo.addEventListener("scroll", event => {
            output.innerHTML = `scrollTop: ${scrollDemo.scrollTop} <br>
                                scrollLeft: ${scrollDemo.scrollLeft} `;
        }, { passive: true });

    </script>
</body>

</html>Code language: HTML, XML (xml)

このチュートリアルは役に立ちましたか？