uniapp滚动容器冲突

滚动容器冲突 ：设置 height:100vh 会让页面滚动容器变成自定义盒子（而非页面原生滚动），导致弹框触发时滚动异常；移除后页面用原生滚动，返回位置功能依赖原生滚动记录，但弹框不再异常。以下是解决方案

1. 移除最外层盒子的 height:100vh，恢复原生页面滚动

确保页面滚动容器是原生页面（而非自定义盒子），这样返回时 uni-app 能自动恢复滚动位置。

2. 弹框打开 / 关闭时控制页面滚动锁定

弹框导致滚动顶部的原因通常是：弹框打开时页面可滚动区域变化，或弹框组件内部触发了滚动重置。通过锁定页面滚动解决：

vue

<template>
  <!-- 示例：van-popup 弹框 -->
  <van-popup
    v-model:show="showPopup"
    @open="lockPageScroll"
    @close="unlockPageScroll"
  >
    弹框内容
  </van-popup>

  <!-- uvui 弹框同理 -->
  <uv-popup
    v-model="showUvPopup"
    @open="lockPageScroll"
    @close="unlockPageScroll"
  >
    uvui 弹框内容
  </uv-popup>
</template>

<script setup>
import { ref } from 'vue'

const showPopup = ref(false)
const showUvPopup = ref(false)

// 锁定页面滚动：给 body/html 添加 overflow: hidden
const lockPageScroll = () => {
  // #ifdef H5
  document.body.style.overflow = 'hidden'
  document.documentElement.style.overflow = 'hidden'
  // #endif

  // #ifdef APP-PLUS || MP-WEIXIN
  // 小程序/APP 用 plus.nativeUI 或页面滚动锁定 API
  uni.setPageScrollInfo({ scrollTop: uni.pageScrollGetInfo().scrollTop }) // 记录当前滚动位置
  uni.createSelectorQuery().select('body').node().exec((res) => {
    res[0].node.style.overflow = 'hidden'
  })
  // #endif
}

// 解锁页面滚动：恢复 overflow
const unlockPageScroll = () => {
  // #ifdef H5
  document.body.style.overflow = ''
  document.documentElement.style.overflow = ''
  // #endif

  // #ifdef APP-PLUS || MP-WEIXIN
  uni.createSelectorQuery().select('body').node().exec((res) => {
    res[0].node.style.overflow = ''
  })
  // #endif
}
</script>

3. 确保页面返回时滚动位置生效

uni-app 原生支持页面返回时恢复滚动位置，但需满足：

• 页面使用原生滚动（非自定义滚动容器）。
• 跳转方式为 uni.navigateTo（保留当前页面），而非 uni.redirectTo/uni.reLaunch。

如果返回位置仍不生效，可手动记录滚动位置并恢复：

vue

<script setup>
import { onUnload, onShow } from 'vue'

// 记录离开页面时的滚动位置
let leaveScrollTop = 0

// 页面离开时记录滚动位置（如跳转其他页面）
onUnload(() => {
  uni.pageScrollGetInfo({
    success: (res) => {
      leaveScrollTop = res.scrollTop
    }
  })
})

// 页面返回显示时恢复滚动位置
onShow(() => {
  if (leaveScrollTop > 0) {
    uni.pageScrollTo({
      scrollTop: leaveScrollTop,
      duration: 0
    })
  }
})
</script>

4. 特殊场景：必须用自定义滚动容器（如 height:100vh）

如果业务需要自定义滚动容器（如嵌套滚动），可将滚动容器设为非页面根节点，并手动管理滚动位置：

vue

<template>
  <!-- 自定义滚动容器 -->
  <div class="scroll-container" ref="scrollContainer">
    页面内容（长文本）
  </div>
</template>

<style scoped>
.scroll-container {
  height: 100vh;
  overflow-y: auto; /* 自定义滚动 */
}
</style>

<script setup>
import { ref, onUnload, onShow } from 'vue'

const scrollContainer = ref(null)
let customScrollTop = 0

// 离开页面时记录自定义容器的滚动位置
onUnload(() => {
  customScrollTop = scrollContainer.value.scrollTop
})

// 返回页面时恢复自定义容器的滚动位置
onShow(() => {
  scrollContainer.value.scrollTop = customScrollTop
})

// 弹框打开时锁定自定义容器滚动
const lockCustomScroll = () => {
  scrollContainer.value.style.overflow = 'hidden'
}

// 弹框关闭时恢复自定义容器滚动
const unlockCustomScroll = () => {
  scrollContainer.value.style.overflow = 'auto'
  scrollContainer.value.scrollTop = customScrollTop // 恢复滚动位置
}
</script>

最终兼容方案总结

场景	解决方案
返回位置生效	保留原生页面滚动（不设置 100vh），用 navigateTo 跳转，或手动记录滚动位置。
弹框不触发滚动顶部	弹框打开时锁定页面滚动（overflow:hidden），关闭时恢复。
必须用自定义滚动容器	手动管理自定义容器的滚动位置，弹框时锁定容器滚动。

这种方案既保留了返回位置功能，又解决了弹框导致的滚动异常，兼容 uni-app 各端（H5 / 小程序 / APP）