Element-UI框架el-scrollbar组件
前⾔
Element-UI 官⽅⽂档并没有写到关于 el-scrollbar 的⽂档，具体原因不详, 下⾯整理⼀下关于隐藏组件 el-scrollbar的⽂档说明
结构组成
纵向滚动条基础使⽤
使⽤注意点: el-scrollbar 标签必须设定⾼度. 只有包裹内容超过给定⾼度, 才会出现滚动条
<el-scrollbar >
  <div>....</div>
</el-scrollbar>
也可以给 el-scrollbar添加 class 属性.
<el-scrollbar class="height-p-100">
<div>...</div>
</el-scrollbar>
横向滚动条基础使⽤
横向滚动条在使⽤上和纵向滚动条使⽤的⽅法⼀样，只需给 el-scrollbar 标签设定宽度即可，如果包裹内容超出最⼤宽度就会出现横向滚动条
<el-scrollbar >
  <div>....</div>
</el-scrollbar>
横向滚动条在使⽤的时候会有⼀些问题，主要表现在这⼏个地⽅：
问题1: window系统下，使⽤横向滚动条后标签底部出现原⽣滚动条
解决⽅法：给 el-scrollbar 添加⼀个⽗级 div，⽗级 div 设定⼀个⾼度值,⽐如 200px，el-scrollbar 设定 200px + 17px = 217px。如果⽗级div ⾼度为 100%，则 el-scrollbar 的⾼度为 height: calc( 100% + 17
px )
<div >
<el-scrollbar >
<div>....</div>
</el-scrollbar>
</div>
注意事项：el-scrollbar 属于⼀个底层的公共组建，在 element 的包含的组建中，好多都依赖了这个滚动条组建，所有⼀般不建议修改原始的CSS样式，如果要修改，可以套⼀个div，让样式效果只作⽤在当前标签内
详细案例
<el-scrollbar
wrapClass="class-name"
viewClass="class-namt"
wrapStyle="color:'#fff';fontSize:'16px';"
viewStyle="color:'#fff';fontSize:'16px';"
:native="false"
:noresize="true"
tag="ul"
>
<div>...</div>
</el-scrollbar>
⽂档
默认值
参数说明类型可选值
可选值默认值
wrapClass可选参数，容器的样式名string--
viewClass可选参数，展⽰视图的样式名string--
wrapStyle可选参数，容器的样式string--
viewStyle可选参数，展⽰视图的样式string--
native可选参数，是否使⽤原⽣滚动boolean-false
noresize可选参数，容器⼤⼩是否是不可变的boolean-false
tag可选参数，渲染容器的标签string-div
源码
⽂章html横向滚动条样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。