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',
          })
        })

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

相关推荐
赴生-12 分钟前
C++进阶 C++11(下)
开发语言·c++
IT_陈寒23 分钟前
Vite热更新失效?可能你在用Windows
前端·人工智能·后端
烬羽1 小时前
后端返回的 JSON 字符串,浏览器怎么"看懂"的?——Ajax 全链路拆解
javascript
tedcloud1231 小时前
taste-skill部署教程:打造个性化AI推荐工作流
服务器·前端·人工智能·系统架构·edge
赴生-1 小时前
C++进阶 异常
开发语言·c++
xinhuanjieyi1 小时前
html修复游戏种太阳错误
前端·游戏·html
黄毛火烧雪下2 小时前
Java 核心知识点总结(一)
java·开发语言
半个落月2 小时前
一个新手用 Bun + Axios 调通 DeepSeek API 的实践记录
javascript
其实防守也摸鱼2 小时前
软件安全与漏洞--软件安全编码与防御技术理论题库
开发语言·网络·安全·网络安全·软件安全·软件安全与漏洞
不好听6132 小时前
深入理解链表:线性数据结构的另一面
javascript·数据结构