Vue H5 scroll-view在浏览器上设置动态高度方法

export default { name: 'App', mounted() { this.adjustViewportHeight(); // 监听窗口尺寸变化 window.addEventListener('resize', this.adjustViewportHeight); }, beforeDestroy() { // 组件销毁时移除监听 window.removeEventListener('resize', this.adjustViewportHeight); }, methods: { adjustViewportHeight() { // 计算视口高度的百分比值 const vh = window.innerHeight * 0.01; // 设置CSS变量 document.documentElement.style.setProperty('--vh', `${vh}px`); } } }

用法

.full-height-element { /* 使用自定义的 --vh 变量代替 100vh */ height: calc(var(--vh, 1vh) * 100); }

vue H5 scroll-view 滚动导致 浏览器跟着滚动

解决

/* 禁止body滚动 */ body { overflow: hidden; } /* 允许滚动视图内部滚动 */ .scroll-view { overflow-y: auto; height: 100%; /* 或其他固定高度 */ }