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

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

相关推荐
.Hypocritical.3 小时前
【Java 进阶】泛型深度解析|泛型类、泛型方法、通配符、类型擦除、PECS 原则
java·开发语言·泛型
VX_bysjlw9853 小时前
基于PHP的论坛系统设计与实现 35136-计算机毕设原创(免费领源码+带部署教程)
开发语言·php·apache·laravel·thinkphp·phpstudy·wampserver
忆~遂愿3 小时前
电影照片散在硬盘里不好找?我用群晖+Plex整理成可远程访问的家庭媒体库
开发语言·php
前端双越老师4 小时前
程序员 1v1 访谈系列第三期:先不要想在工作中有突破
前端·ai编程·全栈
浮生望4 小时前
从作用域链到 React 陈旧闭包:为什么函数式更新能拿到最新 state
javascript
小羊没烦恼!4 小时前
浅谈SQL Server中的事务日志(二)----事务日志在修改数据时的角色
前端·数据库·后端·python·web安全·oracle
myaifas4 小时前
新人的第一个任务该怎么选
前端·产品经理
怕浪猫4 小时前
前端转全栈最低成本的技术栈选择
前端·javascript·面试
狂师4 小时前
AI时代我们要如何玩抓包测试:Reqable + AI Agent
前端·程序员·测试
data analyse 4564 小时前
页面卸载时埋点上报总丢失?sendBeacon 上报与补偿方案
大数据·运维·服务器·前端·数据库·人工智能·数据分析