如何使用 JavaScript 保持滚动

在页面上进行滚动时，有时候需要在滚动后仍然保持固定的位置，例如滚动到页面底部后自动加载更多数据。这时候可以使用 JavaScript 来实现保持滚动的效果。

方法

下面介绍两种实现保持滚动的方法。

方法一：使用 scrollTop 属性

在滚动前，用 JavaScript 记录当前滚动的位置，滚动后通过设置 scrollTop 属性将页面滚动到该位置。

// 记录滚动位置
const currentPosition = window.pageYOffset;

// 模拟异步加载更多数据
setTimeout(() => {
  // 加载完成后，将页面滚动到原来的位置
  window.scrollTo(0, currentPosition);
}, 1000);

方法二：使用 scrollTo 方法

与方法一类似，也是通过 JavaScript 记录当前滚动位置并在加载数据后将页面滚动到该位置。不同之处在于使用 scrollTo 方法实现滚动。

// 记录滚动位置
const currentPosition = window.pageYOffset;

// 模拟异步加载更多数据
setTimeout(() => {
  // 加载完成后，将页面滚动到原来的位置
  window.scrollTo({
    top: currentPosition,
    behavior: 'smooth'
  });
}, 1000);

在以上代码中，scrollTo 方法接受一个包含 top 属性的对象作为参数，指定需要滚动到的位置。同时，behavior 属性将滚动效果设置为平滑滚动。

结论

使用 JavaScript 可以很方便地实现页面保持滚动的效果。方法一中使用 scrollTop 属性可以适用于大部分场景，而方法二中使用 scrollTo 方法可以实现平滑滚动效果。在实际应用中需要根据具体需求选择不同的方法。