vue页面垂直方向出现两个滚动条如何处理

当Vue页面中出现垂直方向的多余滚动条时，通常是由于元素的高度超过了其父容器的限制，或者是某个块级元素设置了滚动条样式导致的。以下是几种常见的解决方法：

1. 检查CSS样式：检查是否存在额外的`overflow-y`属性设置为`scroll`的元素，这可能会添加额外的滚动条。将其改为`auto`或删除即可。

/* 错误示例 */
.scroll-element {
  overflow-y: scroll; /* 修改为 */
  overflow-y: auto; /* 或者移除该行 */
}

2. 设置高度：如果是因为内容过长，可以调整元素的`height`属性或使用百分比、自适应单位来避免固定高度引发的滚动条。

<div class="content" style="max-height: calc(100vh - 60px);"></div>

3. 父组件滚动策略：如果父级需要控制整个区域的滚动，可以将`.vue`文件内的滚动部分包裹在一个`<div>`内，并设置它的`overflow-y`属性为`auto`，然后通过`v-ref`给这个`div`绑定一个ref，然后在JavaScript里操作滚动。

<template>
  <div ref="scrollableArea">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.scrollableArea.scrollTop = 0; // 可以在这里控制滚动位置
  }
};
</script>