把想要出滚动条的内容放在下边标签里即可:
<el-scrollbar style="height:100%">
</el-scrollbar>
如果不想要横向的滚动条,添加css
.el-scrollbar__wrap {
overflow-x: hidden;
}
如果相让滚动条一直显示而不是鼠标移入才显示,添加css
.el-scrollbar__bar.is-vertical {
opacity: 1;
}
滚动到自定义位置
<el-scrollbarl ref="scroll">
// ...
</el-scrollbar>
this.$refs['scroll'].wrap.scrollTop = 100 //想滚到哪个高度,就写多少
动态滚动条
<el-scrollbar :style="{height: getHeight()}">
<div v-for="item of dataList">
//...
</div>
</el-scrollbar>
<script>
methods: {
getHeight() {
//内容高度小于100px 的时候,区域随内容高度自适应;内容高度大于 100px 时显示滚动条
if(this.dataList.length>5) {
return '100px'
} else {
return 'auto'
}
}
}
//...
</script>
滚动条出现的问题及解决方案
如果父级高度会改变,那么滚动条上下拖动就会出现异常
这时只需要在父组件高度改变时,调用组件的update方法即可
如:窗口高度改变时
<el-scrollbar style="height:100%" ref="scrollbar"></el-scrollbar>
let timer = 0;
window.onresize = () => {
//防抖
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
this.$refs.scrollbar.update();
}, 500);
}
原始滚动条样式设置
textarea{
width: 100%;
resize:none;
vertical-align:top;
border: none;
text-indent: 20px;
white-space: pre-line;
}
/*滚动条框设置*/
textarea::-webkit-scrollbar{
width: 2px;
background-color: rgb(232,193,113);
}
/*滚动条设置*/
textarea::-webkit-scrollbar-thumb{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #8d6900;
}