【笔记】vue3.x 根据窗口大小设置滚动条的高度

最新推荐文章于 2023-03-23 15:09:22 发布

惘远

最新推荐文章于 2023-03-23 15:09:22 发布

阅读量1.5k

点赞数

分类专栏： # Vue 3.x 文章标签： vue

本文链接：https://blog.youkuaiyun.com/windysee/article/details/119677480

版权

Vue 3.x 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用Element Plus的el-scrollbar组件实现在页面窗口大小变化时，滚动条高度动态调整。通过JavaScript逻辑和window.resize事件监听，确保了滚动条高度随屏幕尺寸调整的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发过程，遇到了滚动条块的高度需要根据窗口变化而变化的需求，下面我们用elment plus中的el-scrollbar来实现这个需求

还是直接上代码。

<template>
  <el-scrollbar :style="{ height: `${scollHeight}px` }"></el-scrollbar>
</template>

setup() {
  const getScollHeight = () => {
    // 根据自己的需要设置获取高度的逻辑
    return document.body.clientHeight * 0.6
  }
  const scollHeight = ref(getScollHeight())
  const windowResize = () => {
    scollHeight.value = getScollHeight()
  }
  onMounted(() => {
    window.addEventListener('resize', windowResize)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', windowResize)
  })
  return {
    scollHeight
  }
}