el-dialog设置滚动条不生效记录【草稿版,待优化】

目录

  • 前言
  • 一、scrollTop是什么?
  • 二、解决步骤
  • 总结


前言

提示:这里可以添加本文要记录的大概内容:

技术栈
element-plus + vue3 + js

记录el-dialog的弹窗中,通过js控制滚动条不生效。
我这次的需求是这样的,点击某个按钮传入参数查询进入一个上下文的弹窗,需要我手动控制滚动条,滚动到当前点击的item的地方,也就是当前item显示在弹窗的中间部分,并且高亮。弹窗里面是表格,我这边是通过js控制.el-dialog__body 这个滚动元素的滚动条实现的。但是遇到一个问题是,每当我想要scrollTop设置成最大高度scrollHeight的时候,总是不成功。


提示:以下是本篇文章正文内容,下面案例可供参考

一、scrollTop是什么?

scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。

在使用显示比例缩放的系统上,scrollTop 可能会提供一个小数。

二、解决步骤

通过观察,修改目标滚动元素的滚动样式即可。
在这里插入图片描述

/deep/.el-dialog__body {
    border: 1px solid red;
    padding: 10px;
    overflow: scroll;
}

总结

提示:这里对文章进行总结:

主要是自己对scrollTop这个属性了解的不够深入导致。

你可能感兴趣的:(vue.js,elementui,javascript)