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

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

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

要获取和设置 JS 元素的滚动位置，我们需要使用元素的以下两个属性。这些属性可以让我们了解元素的水平和垂直滚动情况。

1. scrollTop： 元素的此属性返回元素内容垂直滚动时允许的像素数。
2. scrollLeft： 元素的此属性返回元素内容水平滚动时允许的像素数。

除此之外，元素的 scrollTop 和 scrollLeft 属性与元素的左上角高度相关，因此，默认情况下，左上角的值为 (0, 0)。

让我们来看一个实现，它将帮助我们理解这两个元素属性的用法。

实施

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

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

以下是给出的代码

上述代码的输出如下所示

从代码中可以清楚地看出，元素的 scrollLeft 属性可以获取和设置元素的水平位置，当点击按钮时，文本会水平滚动。同样，也使用了 scrollRight 属性。

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

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

上述代码的输出如下所示

从代码中可以清楚地看出，元素的 scrollTop 属性可以在滑动时获取和设置元素的垂直位置，文本会垂直滚动。

因此，通过使用这两个元素属性，我们可以了解元素的位置，然后可以设置和获取该元素的滚动位置。