vue让元素滚动到指定位置

1.循环绑定id

<div v-for="(item,index) in arr" :key="index" :id="page+index"></div>
<div @click="scrollPage()"></div>

2.点击获取需要滚动的id,再通过scrollIntoView()滚动

scrollPage(){
    //index与循环的index对应可自由设置动态获取
   const PageId = document.querySelector('#page' + index)
   PageId.scrollIntoView({ behavior:"smooth", block: "center", inline: "start"})
}

• behavior 表示滚动方式。auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth

  表示 直接滚到底 和 使用平滑滚动。

• block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb

  来说，就是竖直方向。start 表示将视口的顶部和元素顶部对齐；center

  表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；nearest 表示就近对齐。

• inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb

  来说，就是水平方向。其值与 block 类似