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

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

相关推荐
名字还没想好☜几秒前
Go 1.23 range-over-func 迭代器实战:自定义可迭代类型、提前退出与惰性求值
开发语言·后端·golang·go·迭代器
逻辑帧4 分钟前
给 AI 时代找工作的同学一些实用建议
前端·后端
喵同志不止步于码农21 分钟前
Java Caffeine 快速入门
java·开发语言·后端·并发·缓存一致性
蜡台22 分钟前
Jetpack Compose 从入门到精通
android·前端·kotlin·compose·jepack
2kπ40 分钟前
QT开发笔记
开发语言·笔记·qt
青 春 记 忆43 分钟前
零基础入门Python15|关联、聚合、索引与事务:订单数据库
开发语言·python·后端开发
江屿风1 小时前
【STM32基础篇】【嵌入式生态问题及历史追溯】流食般投喂
大数据·开发语言·人工智能·笔记·stm32·嵌入式硬件
学习星球1 小时前
Astro 全栈实战:拆解 RealWorld 项目
前端·javascript·架构·系统架构·前端框架·c5全栈
charlie1145141911 小时前
深探std::vector:三指针、扩容与迭代器失效
开发语言·c++·开源项目
软件开发JR1 小时前
基于Web的足球青训俱乐部管理后台系统的设计与开发
java·前端·spring boot·毕业设计