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

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

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

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

使用innerHTML属性更新具有“output”类的div元素的内部内容。scrollTop属性获取或设置元素内容垂直滚动的像素数，而scrollLeft属性获取或设置元素内容从其左边缘滚动的像素数。在通过HTML文档滚动时，innerHTML会不断更新。

注意： 在某些情况下，scrollTop和scrollLeft属性可能返回无限制的双精度数据类型，因此使用Math.ceil()方法将其四舍五入为最接近的整数。

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Basic inline styling -->
    <style> 
        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; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div id="scroll-element"> 
        <p> 
            GeeksforGeeks is a computer  
            science portal for geeks. 
        </p> 
    </div> 
    <button class="scroll-top-btn">Scroll Top</button> 
    <button class="scroll-left-btn">Scroll Left</button> 
    <div class="output"></div> 
  
    <script type="text/javascript"> 
        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)} `; 
        }); 
    </script> 
</body> 
  
</html>

输出：

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