【Front】在表单校验场景中，如何实现页面视口滚动到报错的位置(scrollIntoView api)

Welcome to Ganace's Blog

欢迎您来到Ganace 的个人博客。

在茫茫互联网的海洋里能够遇见您，实在是一份不小的幸运。

诚挚地向您问候一声:您好，朋友！

这里是属于Ganace个人的隐秘小空间，记录了工作学习中遇到的知识点与灵感，以及生活中的碎碎念与吐槽、突如其来的中二病、尬尬的文艺时间、锻炼腹肌的时刻、惊喜的小发现等等。

想要在自己的平淡无奇的人生长河中留下些什么，

或者只是为了拯救老人家岌岌可危的记忆力，

仅此而已。

来到此地，分享与你。

也期待与您的再次相遇！

Share with Me

有任何的分享或者建议与吐槽，都可以Email我：ganace@foxmail.com

欢迎您的来信！

前端中级热点题: 在表单校验场景中，如何实现页面视口滚动到报错的位置(scrollIntoView api)

Element.scrollIntoView()

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

scrollIntoView();
scrollIntoView(alignToTop);
scrollIntoView(scrollIntoViewOptions);

alignToTop 可选

一个布尔值：

如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值。
如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

scrollIntoViewOptions 可选

一个包含下列属性的对象：

behavior 可选

定义滚动是立即的还是平滑的动画。该选项是一个字符串，必须采用以下值之一：

smooth：滚动应该是平滑的动画。
instant：滚动应该通过一次跳跃立刻发生。
auto：滚动行为由 scroll-behavior 的计算值决定。
block 可选定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。
inline 可选定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest。

Vue 项目中的 scrollIntoView 应用

// utils.js 封装的scrollToError方法
/**
 * 自动滚动到错误的校验框
 *
 * @param {*} el 包裹的元素
 * @param {string} [scrollOption={
 *     behavior: 'smooth',
 *     block: 'center'
 *   }] 滚动参数
 */
const scrollToError = (
    el,
    scrollOption = {
        behavior: "smooth",
        block: "center",
    }
) => {
    const isError = el.getElementsByClassName("is-error");
    isError[0].scrollIntoView(scrollOption);
};

// 应用到Vue组件中
<el-form ref="componentFormEle">
...
</el-form>

validate() {
  return new Promise(resolve => {
    this.$refs.componentFormEle.validate(async valid => {
      if (!valid) {
        await this.$nextTick()
        this.$utils.scrollToError(this.$refs.componentFormEle.$el)
      }
      resolve(valid)
    })
  })
}

欢迎页