uni-popup弹窗在移动端overflow-y失效

Question

uniapp移动端出现的兼容问题，在h5上就能滚动，但在移动端就滑动不来

使用的是uni-popup弹窗，在内部定义了一个内容盒子，给它的样式属性是

 height: 25vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

Answer 1

该回答引用自GPT-deepseek, 由博主 GISer Liu 编写：

问题分析

用户在uniapp开发中使用了uni-popup弹窗组件，并在弹窗内部定义了一个内容盒子，设置了height: 25vh;和overflow-y: auto !important;以及-webkit-overflow-scrolling: touch;样式属性。在H5环境下，内容盒子可以正常滚动，但在移动端（如iOS或Android）却无法滚动。这可能是由于移动端浏览器对overflow属性的处理方式与H5环境不同，导致滚动失效。

解决方案

1. 检查CSS样式

首先，确保CSS样式在移动端浏览器中生效。移动端浏览器可能对某些CSS属性的支持不完全，或者需要特定的前缀。

2. 使用scroll-view组件

在uniapp中，推荐使用scroll-view组件来处理滚动内容。scroll-view是uniapp提供的专门用于处理滚动的组件，兼容性更好。

3. 修改代码

将内容盒子替换为scroll-view组件，并调整样式。

代码实现

1. 使用scroll-view组件

<template>
  <uni-popup ref="popup" type="bottom">
    <scroll-view class="content-box" scroll-y>
      <!-- 内容 -->
      <div v-for="item in 20" :key="item">内容 {{ item }}</div>
    </scroll-view>
  </uni-popup>
</template>

<script>
export default {
  methods: {
    showPopup() {
      this.$refs.popup.open();
    }
  }
}
</script>

<style scoped>
.content-box {
  height: 25vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>

2. 解释代码

• scroll-view组件：scroll-view是uniapp提供的滚动容器，支持纵向和横向滚动。通过设置scroll-y属性，可以启用纵向滚动。
• **height: 25vh;**：设置内容盒子的高度为视口高度的25%。
• **overflow-y: auto;**：确保内容超出高度时显示滚动条。
• **-webkit-overflow-scrolling: touch;**：启用iOS设备的平滑滚动效果。

进一步优化

如果仍然遇到滚动问题，可以尝试以下方法：

1. 检查父容器的高度：确保父容器的高度设置正确，避免内容盒子无法正确计算高度。
2. 使用flex布局：确保内容盒子的布局不会影响滚动效果。
3. 调试移动端样式：使用浏览器的开发者工具（如Chrome DevTools）模拟移动端环境，检查样式是否正确应用。

总结

通过使用scroll-view组件替代普通的div容器，可以有效解决uniapp在移动端滚动失效的问题。scroll-view组件在移动端浏览器中具有更好的兼容性，能够确保内容在弹窗中正常滚动。

希望这个解决方案能够帮助您解决问题！如果有其他疑问，欢迎继续咨询。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑