elementuiplus设置scroll-to-error之后 提示被遮挡的解决方案

项目场景:

普通的头部固定,中间滑动的布局,中间内容有表单,提交校验不通过时滚动到第一个错误项


问题描述

elementuiplus的scroll-to-error设置之后是局部滚动 当头部内容层级高于中间表单的时候,错误会被遮挡。

复制代码
---

# 原因分析:
> 错误被遮挡的原因 ,scroll-to-error是局部滚动,头部内容层级高时,会被遮住

---

# 解决方案:

## **scrollIntoView**

通过找到错误节点并指定滚动到错误节点****
```javascript
nextTick(() => {
          let isError = document.getElementsByClassName('is-error')
          isError[0].scrollIntoView({
            // 滚动到指定节点
            // 值有start,center,end,nearest,当前显示在视图区域中间
            block: 'center',
            // 值有auto、instant,smooth,缓动动画(当前是慢速的)
            behavior: 'smooth',
          })
        })

总结:正确的思想指导正确的行动 分析问题背后的原因,再采取正确的方式解决

相关推荐
Das1几秒前
【408】C语言标识符
c语言·开发语言
KaMeidebaby2 分钟前
卡梅德生物技术快报|抗体的制备与纯化:分子实验实操:番茄 sHSP 重组表达与抗体的制备与纯化工艺
前端·数据库·人工智能·其他·算法·百度·新浪微博
IT_陈寒4 分钟前
Vite热更新把我整不会了,原来还要这样配!
前端·人工智能·后端
恋猫de小郭4 分钟前
AI 时代,谷歌都在 Android 官方做了哪些支持?
android·前端·flutter
zxd0203115 分钟前
DevOps + CI/CD:从理念到 Jenkins 实战落地
java·开发语言
qq_白羊座5 分钟前
GitLab CI + Jenkins 双流水线模式Jenkins 端实现
java·开发语言
say_fall6 分钟前
8086汇编程序设计_从基础到实战
开发语言·汇编·8086
zzqssliu13 分钟前
跨境独立站多端适配开发:多语言+多货币+跨平台同步技术实战
前端·javascript·php
一条泥憨鱼14 分钟前
深入理解Java反射(超详细)
java·开发语言·spring·mybatis·反射
Chengbei1114 分钟前
AI赋能Chrome MCP × JS逆向Skill自动化JS逆向助力挖洞与绕过实战(小白也能学会)
javascript·人工智能·chrome·网络安全·自动化·系统安全·安全架构