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

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

相关推荐
lichenyang45313 分钟前
Socket.IO 原理与技术选型
前端
caimouse13 分钟前
ReactOS 图形系统分析(47):GDI 批处理 — gdibatch.c
c语言·开发语言
qq210846295314 分钟前
在python中什么是 self 和 cls?
开发语言·前端·python
我会冲击波15 分钟前
vibe coding 一个多月,我把 Claude Code + Pi 做成了桌面 IDE,还给它移植了 VS Code 的编辑体验
前端·javascript·后端
kyson_22 分钟前
前端性能优化全链路实践指南:从网络、缓存到渲染与监测
前端
前端fighter23 分钟前
线上崩溃?使用 TRAE Work 5分钟把混淆日志翻译成人话并输出复盘报告
前端·vue.js·程序员
网安蟹佬霸30 分钟前
CTF Web方向解题全攻略:从信息收集到getshell(附实战payload与脚本)
android·前端·网络·安全·web安全·网络安全·网安
杨充33 分钟前
05.多用组合和少继承
开发语言·bash
JimmtButler34 分钟前
从 Java 到 JS:我终于把闭包想明白了
javascript·后端