uniapp 弹窗的 textarea 无法滚动如何解决？

在uniapp开发中遇到一个问题：弹窗里的textarea组件无法滚动。即使在textarea里输入大量文字超出可视区域，也无法通过触摸滑动查看隐藏内容。尝试过设置height、max-height、overflow-y: scroll等样式属性都无效，在iOS和Android端都有这个问题。请问该如何解决才能让弹窗内的textarea正常滚动？需要特殊处理还是uniapp本身的限制？

2 回复

在textarea标签上添加@touchmove.stop.prevent阻止默认事件，并设置scroll-top属性控制滚动位置。


在 UniApp 中，弹窗内的 textarea 组件无法滚动通常是由于层级或样式问题导致的。以下是几种常见解决方案：

1. 检查 z-index 层级

确保 textarea 的 z-index 足够高，避免被其他元素遮挡：

.textarea-class {
  z-index: 9999;
}

2. 使用 scroll-view 包裹

将 textarea 放入 scroll-view 中，并设置固定高度：

<scroll-view scroll-y style="height: 200rpx;">
  <textarea placeholder="输入内容"></textarea>
</scroll-view>

3. 调整弹窗结构

避免在弹窗内直接使用 textarea，改用自定义弹窗（如 uni-popup）并确保内容区域可滚动：

<uni-popup ref="popup" type="bottom">
  <scroll-view scroll-y style="max-height: 60vh;">
    <textarea placeholder="输入内容"></textarea>
  </scroll-view>
</uni-popup>

4. 禁用页面滚动

在弹窗显示时禁用页面滚动，避免冲突：

onShowPopup() {
  // 显示弹窗时禁止页面滚动
  document.body.style.overflow = 'hidden';
},
onHidePopup() {
  // 隐藏弹窗时恢复
  document.body.style.overflow = 'auto';
}

5. 使用 position: fixed

为弹窗内容设置固定定位：

.popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background: white;
  z-index: 1000;
}

注意事项：

  • 测试时请使用真机，部分模拟器可能无法复现滚动问题。
  • 确保 textarea 未设置 disabled 或 readonly 属性。

选择适合方案调整后即可解决滚动问题。

回到顶部