JS动态计算滚动区域高度
当需要自定义移动端滚动行为时，可以通过JS动态计算浏览器窗口高度，配合Element Plus的 el-scrollbar 组件来控制滚动。
实现思路
- 将内容容器从普通div改为
el-scrollbar - 动态计算窗口高度，设置为CSS变量
- 在根HTML元素上设置
--body-height变量
代码实现
在 default.vue 布局组件中使用 useResizeObserver 监听尺寸变化：
// default.vue
import { useResizeObserver } from '@vueuse/core'
useResizeObserver(document.body, () => {
document.documentElement.style.setProperty(
'--body-height',
`${window.innerHeight}px`
)
})
typescript
模板中使用 el-scrollbar 替代普通div：
<template>
<div class="layout-wrapper" :style="{ height: 'var(--body-height)' }">
<el-scrollbar>
<router-view />
</el-scrollbar>
</div>
</template>
vue
底部菜单被遮挡的修复
滚动到最底部时，底部菜单可能被遮挡。原因是头部header的高度没有计入滚动区域的padding：
.content-scroll {
padding-bottom: 50px; /* header高度 */
}
css
注意事项
useResizeObserver和useWorker等composable需要定义在onMounted外部，而非内部- Vite开发模式下页面热更新不会重置SharedWorker实例，需要手动刷新
- 真机调试时需要在
vite.config.ts中设置server.host: '0.0.0.0'，让局域网设备可访问
↑