vue3+ts 左侧是el-steps,右侧是el-card卡片 当左侧点击index第三个的时候，右侧就滚动到卡片的第三个,但是右侧滚动的数据要在顶端，不能在最末端

<template>
  <div>
    <el-steps :active="activeStep" direction="vertical">
      <el-step
        v-for="(step, index) in steps"
        :key="index"
        :title="step.title"
        @click="handleStepClick(index)"
      ></el-step>
    </el-steps>

    <div class="card-container" ref="cardContainer" style="height: 300px; overflow-y: auto;">
      <el-card
        v-for="(card, index) in cards"
        :key="index"
        class="card-item"
        style="height: 200px"
        :id="'card-' + index"
      >
        <template #header>
          <div class="card-header">{{ card.title }}</div>
        </template>
        <div class="card-body">{{ card.content }}</div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const steps = ref([{ title: 'Step 1' }, { title: 'Step 2' }, { title: 'Step 3' }]);
const cards = ref([
  { title: 'Card 1', content: 'Content of Card 1' },
  { title: 'Card 2', content: 'Content of Card 2' },
  { title: 'Card 3', content: 'Content of Card 3' },
]);

const activeStep = ref(0);
const cardContainer = ref<HTMLElement | null>(null);

const handleStepClick = (index: number) => {
  activeStep.value = index;
  const targetCard = document.getElementById(`card-${index}`);
  if (targetCard && cardContainer.value) {
    targetCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
};
</script>