vue 滚动定位、锚点跳转 到指定元素位置scrollIntoView

html

<div v-for="(item,index) in xx" :key="index" :id="'audioTime1'+ Object.values(item)[1]">
</div>

滚动方法

  // 滚动
    goAnchor(selector) {
      // console.log(selector)
      // console.log(this.$el)
      //id的形式
      this.$el.querySelector(selector).scrollIntoView({
          behavior: "smooth",  // 平滑过渡
          block:    "center"  // 上边框与视窗顶部平齐。默认值
      });
      或者
      //ref的形式
      this.$refs.fa_container.scrollIntoView(
      {
          behavior: "smooth",  // 平滑过渡
          block:    "center"  // 上边框与视窗顶部平齐。默认值
      });
    }

使用

this.goAnchor("#audioTime1" + Object.values(obj)[1])
//传入 id

scrollIntoView 参数

behavior：auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block：start//定义垂直方向的对齐， "start"：上边框与视窗顶部平齐。, "center", "end", 或 "nearest"之一。默认为 "start"。
inline:nearest//"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

//禁止scrollIntoView
this.$refs.fa_container.scrollIntoView(false);

block各位置效果：