element-plus 的el-scrollbar滚动条组件

最新推荐文章于 2025-05-18 15:44:03 发布

原创

最新推荐文章于 2025-05-18 15:44:03 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

el-scrollbar组件可以替换原生的滚动条，可以设置出现滚动条的高度，若无设置则根据容器自适应。

通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。

scroll 滚动条的滚动事件，会返回滚动条当前的位置。

<script setup lang="ts">
import {
   
    onMounted, ref } from 'vue';
import {
   
    ElScrollbar } from 'element-plus'
    const scrollEvent=({
    
     scrollLeft, scrollTop })=>{
   
   
        console.info(scrollTop)
        val.value=scrollTop
    }

    const val=ref(0)
    const max=ref(0)
    const scrollbarRef = ref<InstanceType<typeof ElScrollbar