引言
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);
}
};