el-scrollbar 出现竖向滚动条会压住盒子
时间: 2025-01-28 10:29:57 浏览: 37
### 解决方案
针对 `el-scrollbar` 竖向滚动条覆盖盒子元素的问题,可以通过调整 CSS 样式以及 HTML 结构来实现更好的视觉效果和用户体验。
#### 调整容器宽度以适应滚动条
为了防止竖向滚动条覆盖内容,可以减少容器的实际宽度,给滚动条留出空间。通常滚动条的宽度大约为 17px 左右,在某些高分辨率显示器上可能会有所不同。因此可以在父级容器设置内边距或外边距:
```css
.parent-container {
padding-right: 18px;
}
```
这将确保即使有滚动条出现也不会遮挡实际内容[^2]。
#### 使用自定义类名隐藏默认滚动条并创建伪滚动条
另一种方法是完全隐藏浏览器自带的滚动条,并利用背景颜色或其他方式模拟一个新的更美观的滚动指示器。这种方式不仅解决了覆盖问题还提升了界面的一致性和美感:
```css
.custom-scroll /deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
.custom-scroll /deep/ .el-scrollbar__bar.is-vertical {
right: 0;
width: 8px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.custom-scroll /deep/ .el-scrollbar__thumb.vertical {
background-color: #aaa;
border-radius: inherit;
}
```
上述代码片段展示了如何通过修改 `.el-scrollbar` 组件内部结构来自定义垂直滚动条外观[^4]。
#### 修改表格组件内的滚动逻辑
对于特定场景下的 `el-table` 表格控件,如果发现其内置滚动机制存在问题,则可以根据具体需求调整该组件的行为模式。例如,当启用了合计行时,可能需要重新分配不同部分之间的相对位置关系,从而避免相互干扰的情况发生[^3]:
```javascript
// 假设这是 Vue.js 中的一个 computed 属性用于动态控制样式
computed: {
tableStyle() {
return this.showSummary ? { 'margin-bottom': '-17px' } : {};
}
}
```
此段 JavaScript 代码示范了怎样依据是否显示总计行的状态改变表体距离底部的距离,以此抵消因滚动条带来的额外占用空间的影响。
阅读全文
相关推荐


















