一立马滚动位置

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

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

// 滚动到选中位置
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"
    })
  }
}

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐