element-ui中的el-scrollbar，操作滚动条
<template>
<div id="test" >
<el-scrollbar
:wrap-class="wrapClass"
:wrap-
:view-class="viewClass"
:view-
:native="native"
:tag="tag"
:
noresize="noresize"
>
<ul>
<li v-for="item in 100">{{item}}</li>
</ul>
</el-scrollbar>
<p class="red">注意：出现横向滚动条时，可在css中直接添加样式
.el-scrollbar__wrap{ overflow-x:hidden; }
或者在wrapClass设置 overflow-x:hidden
</p>
<p class="red">注意: 1，滚动窗⼝⾼度必须固定,el-scrollbar设置height:100%</p>
<p class="red">注意: 2，样式,style全局的，不能有scoped，否则不起作⽤</p>
</div>
</template>
<script>
export default {
data(){
return {
//滚动区域层class
wrapClass:{
wrapClass:true
},
wrapStyle:{
fontWeight:800
},
//滚动整体区域的class
viewClass:{
viewClass:true
},
viewStyle:{
border:'1px solid #000000',
boxSizing:'border-box'
},
/
/ native属性：如果为true就不显⽰el的bar，也就是el模拟出来的滚动条，如果为false就显⽰模拟的滚动条
native:false,
// tag 渲染出来的标签
tag:'section',
// noresize 是否刷新滚动条⼤⼩
noresize:true
}
}
}
</script>
<style>
*{
borderboxmargin: 0;
padding:0;
padding:0;
-webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;
}
ul li{
text-align: center;
margin:20px 0;
}
.wrapClass{
color:red;
overflow-x: hidden;
}
.viewClass{
background:#f5dab1;
}
.red{
color:red;
}
</style>

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