element.scrollIntoView 滚动到指定位置

一立马滚动位置

默认滚动到顶部，滑动过程没有

例如：下拉框选中数据后，定位到该位置上，他没有滚动效果

// 滚动到选中位置
const elScrollIntoView = async () => {
  await nextTick()
  const element =
    document.querySelectorAll(".is-choose_list")[0]
  if (element) {
    element.scrollIntoView()
  }
}

基本用法

element.scrollIntoView() 方法有两个可选的布尔参数：

1. alignToTop（默认为 true）：如果为 true，元素的顶部将与视窗的顶部对齐。如果为 false，元素的底部将与视窗的底部对齐。

2. behavior（默认为 auto）：定义了过渡动画的类型，可以是 "auto"、"smooth" 或其他浏览器的特定值。

使元素滚动到视图的底部

要使元素滚动到视图底部，你可以设置 alignToTop 为 false。例如：

document.getElementById('yourElementId').scrollIntoView({block: "end", behavior: "smooth"});

二 平滑的滚动到位置

可以看到滑动的过程

// el-form校验失败滚动到对应的错误位置
const elFormErrorScrollIntoView = async () => {
  await nextTick()
  // 获取第一个校验错误的元素
  const element = document.querySelectorAll(".bottom")[0]
  // 滚动到错误元素对应位置
  if (element) {
    element.scrollIntoView({
      behavior: "smooth",
      block: "center"
    })
  }
}