输入框聚焦结合div滚动

需求：当键盘tab选中聚焦时，页面对应的div元素滚动到顶

  <section class="test-page">
    <div class="left"></div>
    <div class="center">
      <div class="box-test" v-for="(item, index) in colorList" :id="`${index}`" :style="`background: ${item};`"></div>
    </div>
    <div class="right">
      <div v-for="(item, index) in array" :key="index">
        <el-input v-for="(items, indexs) in item.children" :id="`${index + 1}${indexs}`" v-model="items.value"
          @focus="GetFocus(index, indexs, item, items)" :tabIndex="`${index + 1}${indexs + 1}`"></el-input>
      </div>
    </div>
  </section>

script

<script>
export default {
  name: 'test-page',
  data() {
    return {
      array: [
        {
          title: '1、第一题', children: [
            {
              name: 'test1',
              value: 'test1',
              id: 0
            },
            {
              name: 'test2',
              value: 'test2',
              id: 1
            },
          ]
        },
        {
          title: '2、第二题', children: [
            {
              name: 'test3',
              value: 'test3',
              id: 2
            },
            {
              name: 'test4',
              value: 'test4',
              id: 3
            },
          ]
        }, {
          title: '3、第三题', children: [
            {
              name: 'test5',
              value: 'test5',
              id: 4
            },
            {
              name: 'test6',
              value: 'test6',
              id: 5
            },
          ]
        },
      ],
      focusId: 0,
      colorList: [
        '#409EFF',
        '#F56C6C',
        '#E6A23C',
        '#5CB87A',
        '#1989FA',
      ]
    }
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'Tab') {
        // 阻止默认事件
        event.preventDefault();
        const dom = document.querySelector('.el-input__inner');
        console.log('dom', dom, dom.id);
        if (this.focusId == 0) {
          if (dom) {
            dom.focus()
          }
        } else {
          let focusDom = document.getElementById(`${this.focusId}`);
          console.log('focusDom', focusDom);
          if (focusDom) {
            focusDom.focus()
          } else {
            this.$message.success('到底了');
            let focusDom = document.getElementById(`10`);
            focusDom.focus()
          }
        }
      }
    },
    GetFocus(index, indexs, data, datas) {
      console.log(index, indexs, data)
      if (indexs == data.children.length - 1) {
        index += 1
        indexs = 0
      } else {
        indexs += 1
      }
      this.focusId = `${index + 1}${indexs}`
      console.log('this.focusId', this.focusId)
      if(!document.getElementById(`${datas.id}`)) {
        return
      }
      document.getElementById(`${datas.id}`).scrollIntoView({
        behavior: "smooth",
      });
    }
  }
}
</script>