vue设置overflow-y: auto;keepAlive滚动条位置不正确

可以尝试在keepAlive组件中添加一个ref属性，并在mounted生命周期中获取该组件的scrollTop属性，然后在activated生命周期中将scrollTop属性设置回去，以保持滚动条位置正确。具体代码如下：

<template>
<keep-alive ref="keepAlive">
<router-view></router-view>
</keep-alive>
</template>

<script>
export default {
mounted() {
this.scrollTop = this.$refs.keepAlive.$el.scrollTop;
},
activated() {
this.$refs.keepAlive.$el.scrollTop = this.scrollTop;
}
}
</script>

相关问题

vue中div标签设置了overflow-y:auto; 如何获取滚动的高度

要获取滚动高度，你可以使用以下代码：

var scrollHeight = document.querySelector('div').scrollTop;

其中，`document.querySelector('div')` 用于选择你设置了 `overflow-y:auto;` 样式的 div 元素，`scrollTop` 属性用于获取元素的滚动高度。

vue3设置完overflow:auo后，滚动条位置失效

如果您在Vue3中设置了overflow:auto，并且滚动条位置失效，可能是因为您没有使用正确的CSS属性。在Vue3中，您可以使用以下属性来设置滚动条的位置：

- scrollLeft：设置水平滚动条的位置
- scrollTop：设置垂直滚动条的位置

例如，如果您想将垂直滚动条设置为100px，您可以这样写：

<div style="overflow:auto; height:200px;" ref="scrollContainer" @scroll="onScroll">
  <div style="height:400px;">
    <!-- content here -->
  </div>
</div>

<script>
export default {
  methods: {
    onScroll() {
      const container = this.$refs.scrollContainer;
      container.scrollTop = 100;
    }
  }
}
</script>

请注意，在上面的代码中，我们使用@scroll事件来监听滚动事件，并在onScroll方法中设置滚动条的位置。您也可以在其他方法中设置滚动条的位置，例如在mounted钩子函数中。