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

在 Web 开发中，我们经常需要获取和设置元素的滚动位置。JavaScript 提供了一些内置的方法来实现这个任务。

获取元素的滚动位置

要获取元素的滚动位置，我们可以使用以下两种方法之一。

1. scrollTop 属性

scrollTop 属性返回元素顶部隐藏的像素值。

const element = document.getElementById('myElement');
const scrollTop = element.scrollTop;
console.log(scrollTop);

2. pageYOffset 属性

pageYOffset 属性返回浏览器窗口文档显示区域的顶部相对于整个文档顶部的像素值。

const pageYOffset = window.pageYOffset;
console.log(pageYOffset);

设置元素的滚动位置

要设置元素的滚动位置，我们可以使用以下两种方法之一。

1. scrollTop 属性

我们可以通过设置 scrollTop 属性来改变元素的滚动位置。

const element = document.getElementById('myElement');
element.scrollTop = 100;

2. scrollTo() 方法

scrollTo() 方法接受两个参数：水平滚动位置和垂直滚动位置。如果我们只想改变垂直滚动位置，则可以将第一个参数设置为 0。

const element = document.getElementById('myElement');
element.scrollTo(0, 100);

总结

以上就是使用 JavaScript 获取和设置元素的滚动位置的方法。在实际开发中，我们可以结合页面滚动事件来动态地获取和设置元素的滚动位置。