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

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

相关推荐
互联网中的一颗神经元21 分钟前
06. Small 对象分配:mcache 无锁路径
开发语言·golang
日光倾22 分钟前
TypeScript 随手记 —— 1
前端·javascript·typescript
PPPPickup33 分钟前
金证秋招笔试
java·开发语言
自学it的攻城狮35 分钟前
elpis-core ,koa实现的系统底座, 沉淀80% 的通用能力,剩下20% 用于定制化开发
前端
不正经学生1 小时前
C语言结构体:自定义数据类型,让变量打包出行
java·c语言·开发语言·数据结构·算法
老一岁1 小时前
c问题总结(1)
c语言·开发语言
CappuccinoRose1 小时前
模块化体系
前端·import·export·es modules
AIDANHANG2 小时前
放开靠时间戳对日志前先核请求ID跨服务传播与采样关联
前端·人工智能
林森lsjs2 小时前
队列 FIFO 原理 & 手撕两种队列实现(链表 + 循环数组)—数据结构陆
java·开发语言·数据结构·队列
何以解忧,唯有..2 小时前
Python time 模块详解:时间处理与日期操作指南
开发语言·python