Vue.js 3滚动监听问题：菜单激活与按钮容器滚动异常修复

以下是符合需求的完整实现，解决滚动同步、激活状态异常等问题：

模板结构 #

<template>
  <!-- 按钮容器 -->
  <div ref="buttonContainerRef" class="button-container">
    <button
      v-for="item in menuItems"
      :key="item.id"
      :class="{ active: state.active === item.href }"
      @click="handleButtonClick(item.href)"
    >
      {{ item.label }}
    </button>
  </div>

  <!-- 内容容器 -->
  <div ref="contentContainerRef" class="content-container" @scroll="handleContentScroll">
    <div
      v-for="item in menuItems"
      :key="item.id"
      :data-href="item.href"
      class="content-section"
    >
      <h2>{{ item.label }}</h2>
      <!-- 填充内容，确保有足够高度触发滚动 -->
      <p v-for="i in 20" :key="i">这是{{ item.label }}的内容...</p>
    </div>
  </div>
</template>

脚本逻辑（