element的scrollIntoView接口用法介绍

引言

scrollIntoView 方法用于滚动指定元素的父容器或者当前窗口，使指定的元素对用户可见。

语法

element.scrollIntoView(options):其中 options 参数可选，默认值为{block: "start", inline: "nearest"};还有另外两种情况

• 如果options是布尔值：true表示滚动到元素的顶部，相当于{block: "start", inline: "nearest"}，false表示滚动到元素的底部,即为{block: "end", inline: "nearest"}。

• 如果options是对象，则其包含下列属性

  • block: 定义垂直方向的对齐方式，可选值为start、center、end或者nearest，默认值为start
  • inline: 定义水平方向的对齐方式，可选值为start、center、end或者nearest，默认值为nearest
  • behavior: 定义滚动行为，可选值为auto或者smooth、instant，默认值为auto

应用场景

Element plus 的表单属性scroll-to-error设置为true后，当校验失败时，滚动到第一个错误表单项，其原理就是应用了这个 API。

配置如下：

其部分源码如下：

//表单字段校验方法
const validateField = async (modelProps = [], callback) => {
  const shouldThrow = !isFunction$1(callback);
  try {
    const result = await doValidateField(modelProps);
    if (result === true) {
      callback == null ? void 0 : callback(result);
    }
    return result;
  } catch (e) {
    if (e instanceof Error) throw e;
    const invalidFields = e;
    if (props.scrollToError) {
      // 表单配置项 scrollToError若为true，则执行滚动逻辑
      scrollToField(Object.keys(invalidFields)[0]);
    }
    callback == null ? void 0 : callback(false, invalidFields);
    return shouldThrow && Promise.reject(invalidFields);
  }
};
const scrollToField = (prop) => {
  var _a;
  const field = filterFields(fields, prop)[0];
  if (field) {
    (_a = field.$el) == null
      ? void 0
      : _a.scrollIntoView(props.scrollIntoViewOptions);
  }
};