如何实现动态自定义设置el-card的滚轮位置
首先,我们要将el-card的滚动显示溢出内容的功能开启,具体做法:
<template>
<el-card class="card">
<div>
<!-- your content -->
</div>
</el-card>
</template>
<style scope>
.card{
overflow-y:auto /* 开启滚动显示溢出内容 */
}
</stype>
将el-card元素的overflow-y属性设置为auto,即可在出现内容溢出时显示滚轮。
其次,当开启滚轮显示后,滚轮一直都是默认出现在最顶端,当我们需要更改滚轮的位置时,只需要获取到el-card的dom节点元素,再对该节点的scrollTop属性进行修改即可。
具体修改示例:将滚轮置底的做法
<template>
<el-card class="card">
<div>
<!-- your content -->
</div>
</el-card>
</template>
<script>
export default {
methods:{
updateScrollTop(){
let x=document.getElementsByClassName("card")[0]
x.scrollTop=x.scrollHeight //将滚轮置底
},
}
</script>