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

在JavaScript中，获取和设置JS元素的滚动位置非常简单和容易，尤其是当用户在Web浏览器中构建用户界面时。在创建用户界面时，我们需要一个可以滚动的元素，并且需要知道其水平和垂直滚动。

在本节中，我们将讨论如何获取和设置元素的滚动位置以及用于此目的的属性。同时，我们还将讨论和实现一些示例，这将帮助我们更好地理解概念。

要获取和设置JS元素的滚动位置，我们需要使用以下两个属性。这些属性将使我们能够知道元素的水平和垂直滚动：

scrollTop： 该元素的属性返回元素内容在垂直方向上可以滚动的像素数。
scrollLeft： 该元素的属性返回元素内容在水平方向上可以滚动的像素数。

除此之外，元素的scrollTop和scrollLeft属性相对于元素的左上角，因此默认情况下，左上角的值为（0，0）。

让我们看一个实例，帮助我们理解如何使用这两个属性。

实现

让我们看两个不同的示例代码，了解如何获取和设置元素的滚动位置：

使用scrollRight属性设置元素的滚动位置：

以下是给定的代码：

<html>
<div id="id_1">
  <div id="value">User click the button</div>
</div>
<button id="slide" type="button">Slide it right</button>
<style>
#id_1 {
  width: 150px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#value {
  width: 250px;
  background-color: #ccc;
}
</style>

<script>
const button = document.getElementById('slide');

button.onclick = function () {
  document.getElementById('id_1').scrollLeft += 20;
};
</script>
</html>

上述代码的输出如下所示：

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

从代码中可以明确看到，元素的scrollLeft属性在点击按钮时可以获取和设置元素的水平滚动位置，使得文本在水平方向上滚动。同样地，还可以使用scrollRight属性。

示例2：实现元素的scrollTop属性

我们可以用相同的示例代码来获取和设置元素的垂直滚动位置：

<html>
<div id="container">
  <div id="content">Slide Vertically</div>
</div>
<style>
#container {
  width: 100px;
  height: 250px;
  border: 1px solid #ccc;
  overflow-x: auto;
}

#content {
  height: 300px;
  background-color: #ccc;
}
</style>
<script>
document.getElementById('container').scrollTop;
</script>
</html>

上述代码的输出如下所示：

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