element plus el-scrollbar嵌套,自定义命中滚动条

1 场景

后台管理系统,经典布局,固定头部

element plus el-scrollbar嵌套,自定义命中滚动条_第1张图片

布局为头部区域(淡蓝色),侧边栏区域(淡粉色),内容区域(淡绿色),其中内容区域上部(黑线以上)为面包屑区域,内容区域下部(黑线以下)为实际内容区域

需求:

  1. 根据配置,内容区域可以整体纵向滚动
  2. 根据配置,内容区域下部(黑线以下)可以滚动

2 代码







3 效果

固定头部: 命中实际内容区域的滚动条

element plus el-scrollbar嵌套,自定义命中滚动条_第2张图片

不固定头部: 命中整个内容区域的滚动条

element plus el-scrollbar嵌套,自定义命中滚动条_第3张图片

4 解释

element plus el-scrollbar嵌套,自定义命中滚动条_第4张图片

如图,重点是给外层的el-scrollbar添加view-class="scrollbar-view"属性,然后用.scrollbar-view筛选到外层el-scrollbar容器div元素,让其高度填充满父元素高度,同时给实际的内容区域给一个min-height

可以给fixedHeader赋值false对比看以下,外层的el-scrollbar容器高度超出父元素高度,出现整体滚动条

element plus el-scrollbar嵌套,自定义命中滚动条_第5张图片​​​​​​​

5 推广

这种方法对于滚动条嵌套的情况据可以适用,比图下图中的另一种经典布局element plus el-scrollbar嵌套,自定义命中滚动条_第6张图片

你可能感兴趣的:(element,plus,vue,scene,vue.js,前端,elementui)