Javascript 如何使程序自动滚动以查看VueJs中的绑定类？ 李氏假名

我已经将img components类绑定到一个动态变化的索引，在分辨率较低的屏幕中，我希望我的程序通过自动滚动显示该项。我不想让它溢出来。可能有什么解决办法吗？我还添加了一些图片，以便您能够理解我目前面临的问题

溢出版本：

当前版本：

尝试以下操作：

组件模板

<template>
  <div>
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div v-for="(channel,index) in channels" :key="index">
        <div v-if="channel.ChName">
          <img
            :src="'http://uyanik.tv/conf/images/'+channel.Image"
            height="100px"
            :class="{selectedIndex:currentIndex === index}"
            :ref="index"
          />
        </div>
      </div>
    </div>
  </div>
</template>

---

希望这有帮助

谢谢你的回答。为什么要在ref指令内将索引替换为channelImage？无论何时在dom上指定一个ref，它都不会像您以前希望的那样是动态的。因此，基本上，ref将名称索引作为dom元素的数组（因为它在v-for循环中）。因此，您可以通过以下方式访问引用：$refs.index[0]，即我发现为引用添加一个有意义的名称更简单。事实上，它应该是通灵图像。

<template>
  <div>
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div v-for="(channel,index) in this.channels" :key="index">
        <div v-if="channel.ChName">
          <img
            :src="'http://uyanik.tv/conf/images/'+channel.Image"
            height="500px"
            :class="{selectedIndex:currentIndex === index}"
            ref="channelImage"
          >
        </div>
      </div>
    </div>
  </div>
</template>

watch: {
    currentIndex() {
      window.scrollTo(0, this.$refs.channelImage[this.currentIndex].offsetTop);
    }
  },