el-dialog弹窗前页面可上下滚动,弹窗后不能滚动
时间: 2023-07-30 18:12:42 浏览: 84
这个问题可能是因为弹窗弹出后,它的背景层的样式设置了 `overflow: hidden`,导致页面无法滚动。你可以尝试在弹窗弹出时,给整个页面的样式添加一个类,然后在这个类的样式里取消掉 `overflow: hidden` 的设置。
比如,你可以这样设置:
```css
.no-scroll {
overflow: visible !important;
}
```
然后在弹窗弹出时,给页面的根元素(比如 `<html>` 或 `<body>`)添加这个类:
```javascript
document.documentElement.classList.add('no-scroll');
// 或者 document.body.classList.add('no-scroll');
```
当弹窗关闭时,再把这个类从页面的根元素上移除即可:
```javascript
document.documentElement.classList.remove('no-scroll');
// 或者 document.body.classList.remove('no-scroll');
```
相关问题
vue+elementUI项目中,给el-dialog弹窗加一个滚动条
可以在 el-dialog 组件中加入一个 class 为 "dialog-scroll" 的 div 元素,并在 CSS 中添加如下样式:
.dialog-scroll {
max-height: 400px; /*适当调整高度*/
overflow: auto;
}
然后在 el-dialog 的 template 中为该 div 元素添加所需的内容即可。
在el-dialog弹窗中,el-select第一次下拉滚动到最底部,关闭弹窗,再次打开弹窗,el-select的滚动条还在最底部,没有重置,该怎么充值滚动条
您可以在 `el-dialog` 的 `beforeClose` 事件中,手动重置 `el-select` 的滚动条,方法如下:
1. 给 `el-select` 添加一个 `ref`,例如:`<el-select ref="mySelect">...</el-select>`
2. 在 `el-dialog` 中添加 `beforeClose` 事件处理函数,例如:
```javascript
<el-dialog
...
@beforeClose="handleBeforeClose"
>
...
</el-dialog>
```
```javascript
methods: {
handleBeforeClose(done) {
// 获取 el-select 的 $refs
const mySelect = this.$refs.mySelect;
// 如果 $refs.mySelect 存在,手动重置滚动条
if (mySelect) {
mySelect.$el.querySelector('.el-select-dropdown__wrap').scrollTop = 0;
}
// 调用 done() 方法关闭弹窗
done();
}
}
```
这样,每次关闭 `el-dialog` 前,都会手动重置 `el-select` 的滚动条,以确保下一次打开弹窗时,滚动条回到顶部。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)