vue中重新获取数据导致页面加长，要求在页面更新之后浏览器滚动条滚动到之前浏览记录的位置。以及获取当前页面中是哪个元素产生滚动条的方法。

**解决 Vue 中重新获取数据导致页面滚动条丢失的问题**

在 Vue 应用中，重新获取数据可能会导致页面滚动条丢失，这是因为当数据更新时，浏览器的滚动位置会被重置为顶部。为了解决这个问题，我们需要找到一种方法，让浏览器在页面更新之后仍然滚动到之前的位置。

**获取当前页面中产生滚动条的元素**

首先，我们需要找到当前页面中产生滚动条的元素。我们可以使用 JavaScript 的 `document.body.scrollTop` 和 `window.scrollY` 来获取当前滚动条的位置。但是，这两个属性只返回了顶部和底部的距离，而不是具体的元素。

为了解决这个问题，我们可以使用以下方法：

javascript// 获取当前滚动条的位置const scrollPosition = window.scrollY;

// 获取当前页面中产生滚动条的元素const element = document.elementFromPoint(0, scrollPosition);

在上面的代码中，我们使用 `document.elementFromPoint` 方法来获取当前页面中位于指定坐标点（在本例中为 `(0, scrollPosition)`)的元素。这个方法会返回第一个满足条件的元素。

**保存和恢复滚动条位置**

接下来，我们需要保存当前滚动条的位置，然后在数据更新后恢复它。我们可以使用以下方法：

javascript//保存当前滚动条的位置const savedScrollPosition = scrollPosition;

// 在数据更新后恢复滚动条位置window.scrollTo(0, savedScrollPosition);

**实现页面滚动到之前位置**

现在，我们需要在 Vue 应用中实现上述方法。我们可以使用以下代码：

javascript// Vue 组件<template>
 <div>
 <!-- 页面内容 -->
 </div>
</template>

<script>
export default {
 data() {
 return {
 // 数据 };
 },
 mounted() {
 // 获取当前滚动条的位置 const scrollPosition = window.scrollY;

 //保存当前滚动条的位置 this.savedScrollPosition = scrollPosition;
 },
 methods: {
 // 在数据更新后恢复滚动条位置 updateData() {
 // 获取当前页面中产生滚动条的元素 const element = document.elementFromPoint(0, window.scrollY);

 //保存当前滚动条的位置 this.savedScrollPosition = window.scrollY;

 // 在数据更新后恢复滚动条位置 setTimeout(() => {
 window.scrollTo(0, this.savedScrollPosition);
 },100);
 },
 },
};
</script>

在上面的代码中，我们使用 `mounted` 生命周期来获取当前滚动条的位置，然后保存它。然后，在数据更新后，我们使用 `updateData` 方法恢复滚动条位置。

**总结**

通过以上方法，我们可以解决 Vue 应用中重新获取数据导致页面滚动条丢失的问题。我们需要找到当前页面中产生滚动条的元素，然后保存和恢复滚动条位置。在数据更新后，我们可以使用 `setTimeout` 方法来延迟恢复滚动条位置，以避免页面闪烁。

希望以上方法对你有所帮助！