Vue实现左侧菜单锚点、右侧滑动

<template>

  <div class="editBox">

    <el-tabs v-model="activeName" type="card" tab-position="left" @tab-click="handleTabClick">

      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">

        <span slot="label">{{ tab.label }}</span>

      </el-tab-pane>

    </el-tabs>

    <div class="edit-cards">

      <div v-for="tab in tabs" :key="tab.name" :id="tab.name"

        :class="['edit-card', tab.color, { active: activeName === tab.name }]">

        {{ tab.label }}

      </div>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      activeName: 'first', // 当前激活的标签名

      tabs: [

        { name: 'first', label: '用户管理', color: 'edit-red' },

        { name: 'second', label: '配置管理', color: 'edit-orange' },

        { name: 'third', label: '角色管理', color: 'edit-yellow' },

        { name: 'fourth', label: '定时任务补偿', color: 'edit-green' },

      ],

    };

  },

  mounted() {

    this.bindScrollEvent();

  },

  methods: {

    bindScrollEvent() {

      const editCards = document.querySelector('.edit-cards');

      const tabHeights = this.tabs.map(tab => {

        const card = document.getElementById(tab.name);

        return {

          tabName: tab.name,

          offsetTop: card.offsetTop,

        };

      });

      editCards.addEventListener('scroll', () => {

        const scrollPosition = editCards.scrollTop;

        tabHeights.forEach((item, index) => {

          if (index === tabHeights.length - 1) {

            if (scrollPosition + 200 >= item.offsetTop) { // 200 是一个偏移量，可以根据实际需要调整

              this.activeName = item.tabName;

            }

            return;

          }

          if (scrollPosition >= item.offsetTop &&

            scrollPosition < tabHeights[index + 1].offsetTop - 200) { // 200 是一个偏移量，可以根据实际需要调整

            this.activeName = item.tabName;

          }

        });

      });

    },

    scrollToTabContent(tabName) {

      const contentElement = document.getElementById(tabName);

      if (contentElement) {

        contentElement.scrollIntoView({ behavior: 'smooth', block: 'start' });

      }

    },

    handleTabClick(tab) {

      this.activeName = tab.name;

      this.scrollToTabContent(tab.name);

    },

  },

};

</script>

<style scoped>

.editBox {

  width: 100%;

  display: flex;

}

.edit-cards {

  height: 80vh;

  overflow-y: scroll;

}

.edit-card {

  width: 500px;

  font-size: 30px;

  padding: 20px;

}

.edit-red {

  height: 800px;

  background-color: red;

}

.edit-orange {

  height: 500px;

  background-color: orange;

}

.edit-yellow {

  height: 700px;

  background-color: yellow;

}

.edit-green {

  height: 400px;

  background-color: green;

}

</style>