如何获取和设置元素的滚动位置

摘要: 在本教程中，您将学习如何使用 Element.scrollTop 和 Element.scrollLeft 属性获取或设置元素的滚动位置。

要获取或设置元素的滚动位置，请执行以下步骤

首先，使用选择方法（如 querySelector()）选择元素。
其次，通过 scrollLeft 和 scrollTop 属性访问元素的滚动位置。

Element.scrollTop 获取或设置元素内容垂直滚动的像素数。

Element.scrolLeft 获取或设置元素内容从其左边缘滚动的像素数。

请注意，元素的左上角为 (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)

本教程对您有帮助吗？