如何使用 JavaScript 获取和设置元素的滚动位置？

在本文中，我们将学习如何使用 JavaScript 获取和设置 HTML 元素的滚动位置。

方法：我们将使用 HTML DOM querySelector() 和 addEventListener() 方法以及 HTML DOM innerHTML、scrollTop 和 scrollLeft 属性。

我们创建一个 id 为“scroll-element”的 HTML div 元素，并使用querySelector()方法选择它。在此分割元素中定义了一个段落元素，其高度和宽度大于 div 元素的高度和宽度，以使滚动条可见。另一个 div 元素是使用“输出”类创建的，以显示第一个分割元素的滚动位置。使用addEventListener()方法将事件侦听器附加到 id 为“scroll-element”的 div 元素。 要附加的事件是滚动 事件。

使用 innerHTML 属性使用“输出”类更新 div 元素的内部内容。 scrollTop 属性获取或设置元素内容垂直滚动的像素数，而 scrollLeft 属性获取或设置元素内容从其左边缘滚动的像素数。滚动 HTML 文档时，innerHTML 会反复更新。

注意：在某些情况下，scrollTop 和 scrollLeft 属性可能会返回不受限制的双精度数据类型，因此 Math.ceil() 方法用于向上舍入到最接近的整数。

示例：在此示例中，除了滚动事件之外，还有两个使用“scroll-top-btn”类创建的按钮 和“scroll-left-btn”分别。单击第一个按钮将 id 为“scroll-element ”的 div 元素的 scrollTop 属性增加 25，单击第二个按钮将除法元素的 scrollLeft 属性增加 25。

HTML

  

    
    
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        p {
            font-size: 20px;
            font-weight: bold;
        }
  
        #scroll-element {
            height: 18.75rem;
            width: 18.75rem;
            overflow: auto;
            background-color: green;
            margin: 0 auto;
            color: white;
        }
  
        #scroll-element p {
            height: 25rem;
            width: 25rem;
        }
  
        .output {
            margin-top: 2rem;
        }
  
        button {
            margin-top: 2rem;
            cursor: pointer;
        }
    

  

    GeeksforGeeks
    
        
            GeeksforGeeks is a computer 
            science portal for geeks.
        
    
    Scroll Top
    Scroll Left
    
  
    
        const scrollElement = document.querySelector("#scroll-element");
        const scrollTopBtn = document.querySelector(".scroll-top-btn");
        const scrollLeftBtn = document.querySelector(".scroll-left-btn");
        const outputDiv = document.querySelector(".output");
  
        scrollTopBtn.addEventListener("click", function () {
            scrollElement.scrollTop += 25;
        });
        scrollLeftBtn.addEventListener("click", function () {
            scrollElement.scrollLeft += 25;
        });
        scrollElement.addEventListener("scroll", () => {
            outputDiv.innerHTML = 
            `scrollTop: ${Math.ceil(scrollElement.scrollTop)}
            <br> scrollLeft: ${Math.ceil(scrollElement.scrollLeft)} `;
        });
    

  

输出：