使用antd form表单自带属性scrollToFirstError校验不通过时自动滚动到第一个校验错误位置,但是经常没有效果,手动添加一个滚动方法来处理
// 表单滚动到第一个报错处(antd) export const scrollToFirstError = () => { document.querySelector('.ant-form-item-has-error')?.scrollIntoView({behavior: 'smooth', block: 'center'}); };
scrollIntoView()
方法会滚动元素的父容器,使被调用 scrollIntoView()
的元素对用户可见。WEB API链接
-
behavior
定义过渡动画,默认值为auto
。auto
,表示没有平滑的滚动动画效果。smooth
,表示有平滑的滚动动画效果。
-
block
定义垂直方向的对齐,默认值为start
。start
,表示顶端
对齐。center
,表示中间
对齐。end
,表示底端
对齐。-
nearest
:- 如果元素完全在视口内,则垂直方向不发生滚动。
- 如果元素未能完全在视口内,则根据最短滚动距离原则,垂直方向滚动父级容器,使元素完全在视口内。
-
inline
定义水平方向的对齐,默认值为nearest
。start
,表示左端
对齐。center
,表示中间
对齐。end
,表示右端
对齐。-
nearest
:- 如果元素完全在视口内,则水平方向不发生滚动。
- 如果元素未能完全在视口内,则根据最短滚动距离原则,水平方向滚动父级容器,使元素完全在视口内。
alignToTop
- 当传入参数
true
时,相当于{behavior: 'auto', block: 'start', inline: 'nearest'}
- 当传入参数
false
时,相当于{behavior: 'auto', block: 'end', inline: 'nearest'}
当未传入参数时,默认值为:{behavior: 'auto', block: 'start', inline: 'nearest'}
标签:nearest,滚动,错误,form,scrollIntoView,校验,对齐,block From: https://www.cnblogs.com/anin/p/17382787.html例子
const element = document.getElementById("box"); element.scrollIntoView(); element.scrollIntoView(false); element.scrollIntoView({ block: "end" }); element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });具体使用
在表单校验失败的catch事件中调用滚动方法
form.validateFields() .then((values) => { //校验成功逻辑 }) .catch(scrollToFirstError);