element-ui中el-scrollbar 滚动到底部

小前端

已于 2024-09-13 09:37:09 修改

阅读量2.6k

点赞数 3

文章标签： ui vue.js javascript

于 2024-02-26 13:25:13 首次发布

本文链接：https://blog.csdn.net/weixin_45041493/article/details/136296849

版权

本文介绍了在Vue项目中如何使用el-scrollbar组件，并提供了如何通过refs获取滚动条实例以及控制其滚动到指定位置的示例代码。

摘要由CSDN通过智能技术生成

控制el-scrollbar内滚动条的方法与控制页面的滚动条的方法基本一样，只是获取el-scrollbar节点的滚动条时，需使用 refs.scrollMenuRef.wrap


/*el-scrollbar 必须指定高度*/
<el-scrollbar ref='scrollMenuRes' style='width:100%;height:200px;' wrap-style="overflow-x:hidden;">
	<div v-for='i=0;i++;i<100'>第{{i}}个</div>
</el-scrollbar>
<script setup>
import { onMounted } from 'vue';
const ref=ref('')
const upDateScrollMenuRes=()=>{
//获取 el-scrollbar 内滚动条向下滚动的距离 ref.scrollMenuRes.wrap.scrollHeight
//ref.scrollMenuRes.wrap.scrollTop 控制 el-scrollbar 内滚动条滚动到指定位置
	ref.scrollMenuRes.wrap.scrollTop=ref.scrollMenuRes.wrap.scrollHeight
}
Onmouted(()=>{
	upDateScrollMenuRes()
})
</script>