Vue.js 导航栏高亮下移实现 - 添加按钮滚动到下一项

<template>
  <div class='homeWork_list'>
    <div class='homeWork_left'>
      <button class='scrollBtn' @click='scrollToNext'>下一页</button>
      <div
        class='directorybox'
        :class='{ selected: selected === index }'
        @click='choose(index)'
        v-for='(item, index) in directorydata'
        :key='index'
      >
        {{ item.name }}
        <div class='triangle'></div>
      </div>
    </div>
    <HomeCard :componentdata='componentdata' :especially='especially' />
  </div>
</template>
<script>
import HomeCard from '../components/src/home_card.vue'

export default {
  components: {
    HomeCard
  },
  data() {
    return {
      directorydata: [
        { name: '三会一课' },
        { name: '年度计划' },
        { name: '主题党日' },
        { name: '同主题同步学' },
        { name: '谈心谈话' },
        { name: '组织生活会' }
      ],
      selected: 0,
      especially: 'default',
      componentdata: [
        // ...
      ]
    }
  },
  methods: {
    choose(index) {
      this.selected = index
      if (index === 1) {
        this.especially = 'special'
      } else {
        this.especially = 'default'
      }
    },
    scrollToNext() {
      const directoryBox = document.querySelector('.homeWork_left')
      const selectedElement = document.querySelector('.selected')
      if (selectedElement) {
        const selectedHeight = selectedElement.offsetHeight
        const directoryHeight = directoryBox.offsetHeight
        const scrollTop = directoryBox.scrollTop
        const selectedIndex = Array.from(directoryBox.children).indexOf(selectedElement)

        if (selectedIndex < this.directorydata.length - 1) {
          const nextElement = directoryBox.children[selectedIndex + 1]
          const nextElementHeight = nextElement.offsetHeight
          const nextElementTop = nextElement.offsetTop

          // Scroll to next element
          directoryBox.scrollTop = nextElementTop - directoryHeight + nextElementHeight
        } else {
          // Scroll to first element
          directoryBox.scrollTop = 0
        }
      }
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/assets/css/public_module.scss';
.homeWork_list {
  display: flex;
  flex-direction: row;
  width: 890px;
  height: 480px;
  background-color: #ffffff;
}
.homeWork_left {
  width: 220px;
  height: 480px;
}
.homeWork_right {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  width: 670px;
  height: 480px;
  overflow: auto;
  .work_card {
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 120px;
    margin-left: 15px;
    margin-top: 26px;
    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: 0 0 11px 0 #85090926;
    background: #ffffff;

    .work_card_top {
      @include flex-center;
      width: 200px;
      height: 50px;
      background: url(@/assets/img/home/csbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      span {
        color: #ffffff;
        font-size: 18px;
        font-weight: 700;
      }
    }
    .work_card_bottom {
      @include flex-center;
      width: 200px;
      height: 70px;
      border-radius: 10px;
      background-color: #ffffff;
      .card_content {
        display: flex;
        justify-content: space-between;
        width: 190px;
        height: 52px;
        .card_num1,
        .card_num2,
        .card_num3 {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          :first-child {
            color: #333333;
            font-weight: 700;
            font-size: 18px;
          }
          :last-child {
            color: #999999;
            font-weight: 400;
            font-size: 12px;
          }
        }
        .card_num1,
        .card_num2,
        .card_num3 {
          width: 65px;
          height: 52px;
          .card_num3_color {
            color: #ff6060;
          }
        }
      }
    }
  }
}
.directorybox {
  @include flex-center;
  position: relative;
  width: 150px;
  height: 50px;
  margin-left: 30px;
  margin-top: 26px;
  border-radius: 2px;
  opacity: 1;
  font-size: 18px;
  font-weight: 700;
  background: #f6f6f6;
  color: #333333;
  .triangle {
    position: absolute;
    right: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid #ffffff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
}
.selected {
  background: #d30000;
  color: #f6f6f6;
  .triangle {
    border-left: 10px solid #d30000;
  }
}
</style>